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)，就实现了部分情况下的父子组件的数据双向绑定。

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

　　父组件： 

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

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

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

　　是不是能够理解.sync修饰符了呢！

　　

 

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/10120043.html