Vue中sync修饰符分析原理及用法示例 Vue中sync修饰符分析原理及用法

不使用sync修饰符的代码示例
使用sync修饰符的代码示例
sync修饰符的原理

前几天在看别人代码时，发现了sync修饰符的妙用，特记录其用法和原理如下。

不使用sync修饰符的代码示例父组件：

子组件：

文章图片

点击子组件的按钮就可以控制父组件“11111”的显示与隐藏。
使用sync修饰符，代码就会简单很多。

使用sync修饰符的代码示例父组件：

子组件：

可以看到使用sync修饰符之后，父组件就不需要向子组件传递方法，父组件也不需要特意写修改变量的方法了。此时点击子组件的按钮，一样可以控制父组件的“11111”的显示与隐藏。

sync修饰符的原理在不使用sync时父组件中子组件绑定的update事件没有传递参数，其实绑定事件默认传递了$event参数。

文章图片

这里值得注意的是如果绑定的是clikc等原生事件时，$event是指事件对象，如果是自定义事件，$event则指子组件触发该方法时传递的参数，在上面的例子中，$event则指show变量。
所以不使用sync修饰符时，父组件的代码可以改造成如下（直接将$event赋值给show变量，父组件不需要再另外写一个修改变量的方法）：

我们再进一步修改代码（绑定方法时指明要修改的变量）：