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，导致弹框点击打开一次之后，后面再不会打开。