精华内容
下载资源
问答
  • sync修饰符

    2020-11-09 09:00:19
    :name="name" 用法实例: 父组件里传值 :name.sync="name" 子组件里面改值 this.$emit('update:name',1234567)
    :name="name"
    用法实例:
    父组件里传值
    :name.sync="name"
    子组件里面改值
    this.$emit('update:name',1234567)
    
    展开全文
  • #深入理解vue 修饰符sync【 vue sync修饰符示例】 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布...

    #深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
    示例代码如下:

    <comp :foo.sync="bar"></comp> 
    

    会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp> 
    

    当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue) 
    

    猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的。

    <template>
        <div class="details">
            <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
            <button @click="changeValue">toggle</button>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    Vue.component('myComponent', {
          template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
          props:['show'],
          methods: {
            closeDiv() {
              this.$emit('update:show', false); //触发 input 事件,并传入新值
            }
          }
    })
    export default{
        data(){
            return{
                valueChild:true,
            }
        },
        methods:{
            changeValue(){
                this.valueChild = !this.valueChild
            }
        }
    }
    </script> 
    

    动态效果如下:

    GIF.gif

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。这里用sync实现,只是给大家提供一个思路,让其明白他的实现原理,可能有其它复杂的功能适用sync。

    这只是一个简单的例子,看完这个不知你是不觉得有个指令跟这个很相似,v-model?对,就是v-model在组件上使用的时候。
    具体的可以查看:vue 自定义组件使用v-model,可以实现同样的功能。也是以这个弹窗事件做演示的

    展开全文
  • Vue当中的sync修饰符

    2020-10-23 09:36:21
    vue当中sync修饰符 在vue当中 如果父组件写了修饰符sync,那么在子组件如果想改变修饰符sync修饰的父组件属性,那么就在子组件里触发一个函数 // 吧并且在函数内部写this.emit方法("update:参数1","参数2")参数一是你...

    vue当中sync修饰符

    在vue当中
    如果父组件写了修饰符sync,那么在子组件如果想改变修饰符sync修饰的父组件属性,那么就在子组件里触发一个函数
    // 吧并且在函数内部写this.emit("update:1","2")sync,syncsyncthis.emit方法("update:参数1","参数2") 参数一是你在父组件中sync修饰的属性名,参数二是你要把父组件中sync修饰符修饰的属性改为什么值。 sync的原理:子组件当中写this.emit(“update:visible”, true)就相当于
    触发父组件定义的事件中的update函数并且把参数传给了update函数然后函数里写
    this.visible=true,这隐含的含义就是update函数在父组件上不能在写了,因为写了就会冲突、。
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 主要介绍了vue 之 .sync 修饰符的相关知识,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
  • .sync修饰符

    2020-11-03 15:16:01
    .sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。 第二步:具体解释 一般情况下,想要实现父子组件间值的传递,通常使用的是props和自定义事件$emit。 其中,父组件通过...

    第一步:先用一句话解释

    .sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。

    第二步:具体解释

    一般情况下,想要实现父子组件间值的传递,通常使用的是 props 和自定义事件 $emit 。
    其中,父组件通过 props 将值传给子组件,子组件再通过 $emit 将值传给父组件,父组件通过事件j监听获取子组件传过来的值。
    如果想要简化这里的代码,可以使用.sync修饰符,实际上就是一个语法糖

    第三步:举一个例子来说明

    • Father.vue
    <template>
      <div class="app">
         {{dataApp}}
        <hr>
        <Child :money.sync="dataApp"/>
        // <Child :money="dataApp" v-on:update:money="dataApp = $event"/>  //两句作用等同
      </div>
    </template>
    
    <script>
    import Child from "./Child.vue";
    export default {
      data() {
        return { dataApp: 10000 };
      },
      components: { Child }
    };
    </script>
    • Child.vue
    <template>
      <div class="child">
        {{money}}
        <button @click="$emit('update:money', money-100)">
        </button>
      </div>
    </template>
    
    <script>
    export default {
      props: ["money"]
    };
    </script>

    上面例子中,父组件传了一个参数 money 给子组件,子组件通过$emit修改 money 后,将值同步到父组件。
    这里 <Child :money="dataApp" v-on:update:money="dataApp = $event"/> 就相当于 <Child :money.sync="dataApp"/> 。

    小结

    以上是我的一些学习思路和总结,深入学习可以参考Vue文档里的相关介绍,欢迎大家和我多多交流,如有错误烦请指正~~~

    展开全文
  • 主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue中.sync 修饰符

    2018-12-14 16:16:00
    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”。  正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是用来控制是否显示Dialog的,后面...
  • vue的sync修饰符

    2020-04-23 10:49:56
    在有些情况下,我们可能需要对一个prop进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的...在vue 2.3.0后新增了.sync修饰符,可以完美实现“双向绑定” 效果 具体实现 父组件:使用.sync修饰符向子组件中...
  • vue .sync 修饰符

    千次阅读 2017-11-24 14:53:31
    .sync修饰符-子组件改变父组件的状态 子组件向父组件传递参数通过事件接口实现 $on(),$emit(), .sync修饰符与$on(),$emit()区别 .sync修饰符是改变父组件的状态,当子组件与父组件公用状态的时候也会被改变,...
  • vue sync修饰符

    2018-12-21 14:29:19
    我们先看下官方文档 vue 修饰符sync vue 在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起...
  • 本篇文章主要介绍了如何理解Vue的.sync修饰符的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • .sync修饰符的作用 .sync修饰符之前的写法 使用.sync修饰符的写法 .sync修饰符与$emit(update:xxx),驼峰法和-写法的区别

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 702
精华内容 280
关键字:

sync修饰符