浅析 .sync 修饰符

在某些时候，我们可能需要子组件接受来自父组件的外部数据，而 Vue 规定组件不可修改其外部数据 props。

例如：子组件有外部数据 cData，将父组件的 pData 传给 cData，预期是在点击子组件按钮时，cData 的值减少10。

我们可以用 vm.$emit 方法让子组件在点击按钮时触发一个事件 update: cData：

<button @click="$emit('update:cData, cData-100')">-10</button>

然后在父组件监听此事件

<Child :cData="pData" v-on:update:cData="pData = $event"

Vue 规则：$emit 可以触发事件，并传参。$event 可以获取 $emit 的参数。

完整代码如下：

//子组件
<template>
  <div>
    {{ cData }}
    <button @click="$emit('update:cData', cData - 100)">-10</button>
  </div>
</template>
<script>
export default {
  props: ["cData"],
};
</script>

//父组件
<template>
  <div>
    {{ pData }}
    <Child :cData="pData" v-on:update:cData="pData = $event" />
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      pData: 1000,
    };
  },
  components: { Child },
};
</script>

由于类似的情景很常见，所以 Vue 提供了 .sync 修饰符简化写法：

在给 cData 传值时加上 .sync 即可（前提是要将 $emit 触发的事件名取为'update:cData'）：

上面代码父组件 template 中的

<Child :cData="pData" v-on:update:cData="pData = $event" />

就可以改写成

<Child :cData.sync="pData"/>