sync 简单实现 父子组件的双向绑定

这里主要是对vue文档中的sync进行一个再解释：

 

如果自己尝试的话，最好在已经使用emit 和prop实现了双向绑定的组件中尝试，以免出现不必要的错误；

    
        
        
        
        
    
    
    
    

    　　
        你的名字：{{name}}
    
    

 

第一步：将子组件的emit事件修改为update形式

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

this.$emit('update:title', newTitle)
emit都知道是子组件向父组件派发事件； 从 update:myPropName 我们可以得知 update：后的值是不固定的；

第二步： 改变父组件的v-bind

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：

document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
>
在父组件中，v-bind:后的值title也是不固定的，而=后的“doc.title”则是父组件中存在的本地数据

 

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

简写

 

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

如果子组件派发出来的事件，需要经过表达式的改写（如 取反之类的）都无法使用sync； 你可以使用比较好用的 emit 和prop来实现双向绑定

 

    
    

            
        你的名字：{{name}}