Vue项目中使用 .sync修饰符与$emit(update:xxx)

Vue项目中使用 .sync修饰符与$emit(update:xxx)

我们常见的父与子组件之间的通信,一般都是父组件自定义属性,子组件通过子props接收,如果想修改父组件传递过来的变量,一般使用this.$emit(事件名,参数,…)的形式进行事件提交.sync是vue中用于实现简单的“双向绑定”的语法糖.

.sync修饰符的作用

vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决,利用EventBus，当子组件触发事件时，父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容。

也就是说，父组件需要传一个绑定值（myMessage）同时需要设置一个更新触发函数（func）给子组件修改绑定值的时候调用。

使用.sync修饰符的写法
会简化上面的写法，父组件不需要定义更新触发函数。

如果未触发事件 this.$emit(‘update:show’, false); 则外部感知不到子组件内部对show的改变，依然认为此事的值是true，导致弹框点击打开一次之后，后面再不会打开。