vue中.sync 修饰符

　　一直以来，都不太明白.sync的用法，归根结底缘由在于，没有仔细阅读“.sync修饰符”。

　　正好，最近在拿一个项目练手，而后使用了elment-ui，而后在用到dialog的时候，属性visible是用来控制是否显示Dialog的，后面特地强调了支持.sync修饰符。

 

　　因此，此时再次看到.sync修饰符，就会想到这个Dialog，那么必然不能放过了，正好好好研究一下.sync修饰符的用法。

　　vue官网关于.sync：

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

　　这说明在某些状况下数据传递须要“双向绑定”，但又不能为了这些少数状况，而致使多数状况的数据维护困难，因此就“推荐以 update:myPropName 的模式触发事件取而代之”，此时父组件就会稍显麻烦，须要先绑定数据v-bind，而后监听v-on:update:myPropName，为了父组件使用上的方便，vue因而为这种模式提供了.sync修饰符，也就是说父组件直接使用:myPropName.sync传递数据，子组件使用this.$emit("update:myPropName",myPropValue)，就实现了部分状况下的父子组件的数据双向绑定。

　　经过具体代码实现一遍比较具象：

　　父组件： 

<modal-stop title="附加设备停用" :dialogVisible.sync="visible" @confirm="stopDevicesConfirm"/>

　　子组件是一个Dialog，那么点击“取消”按钮时，其实也就是一个操做——关闭弹窗，那么此时若是可以不须要在每个父组件当中定义：this.visible=false，确定会很happy，这就须要.sync修饰符来帮忙了。

　　父组件已经定义  :dialogVisible.sync="visible"，

　　那么子组件当中： this.$emit("update:dialogVisible", false);   这里的dialogVisible就是咱们自定义的属性名称，也就是myPropName，emit传递回去的false也就是须要在点击“取消”按钮以后，须要将visible修改为的值。

　　是否是可以理解.sync修饰符了呢！