快速理解 .sync !

理解 .sync

缩写为 ： :外部参数.sync="本地参数"

作用：.sync 会被扩展为一个自动更新父组件属性的 v-on 监听器，通过子组件的 $emit() 配合，时时更新本地参数

代码示例：

<Child :son.sync="daddy" />

如以上代码，Child 为 import 引入的外部组件。son是Child组件被监听的参数，daddy 是本地需要进行改变的参数。

它的原本模样是这样的：

<Child :son="bar" @update:son="daddy = $event"></comp>

当子组件更新了 son 的值时，它会触发一个更新事件：

this.$emit('update:son', newValue)

在这里面，$event 可以获取$emit 的参数。从而进行更新。

我们需要记住三个点：

• Vue 规则： 组件不能修改props 外部数据
• Vue 规则： this.$emit 可以触发事件， 并传参
• Vue 规则： $event 可以获取$emit 的参数