vue开发技巧之.sync

在实际开发过程中，难免遇到父子组件套用，父组件向子组件传值，子组件需要修改父组件传递进来的值。在vue中是不建议，直接修改props中的值，会造成属性更改来源不明的问题。当然，vue也会给你出现如下的报错（避免直接更改属性，因为只要父组件重新渲染，该值就会被覆盖。）。

解决这个问题的方法是，在子组件的回调函数中派发一个自定义事件，然后在父组件中监听事件。

 

 如图修改为第二种写法：

changeTitle() {
      this.$emit('update:title', '新标题')
    },

       在这种解决子修改父组件传递的值的思路中，会有一个隐患，就是，你每传过去一个值，绑定需要一行，监听需要一行，那么就是两行代码，如果传两个呢，三个呢，四个呢，就会使父组件中代码变得很长

 

 使用vue提供的修饰符  .sync 可以大大简化代码，对象传递可以简化为一行，单个属性传递可以简化为之前的一半。

‘.sync’ 表示将属性传递过去，并且还会监听这些属性的变化。相当于给props开启了双向数据绑定。