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

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

.sync修饰符的作用

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

.sync修饰符之前的写法

父组件：

<parent :myMessage=“bar” @update:myMessage=“func”>

js定义函数:

func（val）{
	this.bar = val;
}

子组件，事件触发函数：

func2(){
	this.$emit(‘update:myMessage’,valc);
}

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

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

<comp :myMessage.sync="bar"></comp>

子组件：

this.$emit('update:myMessage',valc);

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