浅析 Vue 中的 .sync 修饰符

Vue 规定组件不能修改 props 外部的数据，那如果我们想要通过一个子组件去修改父组件中的内容，我们就可以使用 .sync 修饰符。

在 Vue 中，我们可以通过 $emit 触发事件并传参，使用 $event 可以获取 $emit 的参数，.sync 修饰符就是通过这两个方法实现的。

下面用代码举例。

// Father.vue
<template>
  <div class="app">
    这里是 Father.vue 我有一个数字： {{number}}
    <hr>
    使用 .sync 修饰符
    <Child :number.sync="number"/>      
    不使用 .sync 修饰符
    <Child :number="number" v-on:update:number="number=$event" />    
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { number: 10000 };
  },
  components: { Child: Child }
};
</script>

//Child.vue
<template>
  <div class="child">
    这里是 Child.vue，{{number}}
    <button @click="$emit('update:number', number+1)">
      <span>数字加一</span>
    </button>
  </div>
</template>
<script>
export default {
  props: ["number"]
};
</script>

上面的代码在页面中显示的效果如下图所示，为了节省空间边框的代码就没有写在上面。

当我们点击任意一个 Child 组件中的 “数字加一” 按钮时，Child 组件和 Father 组件中的 number 都会同时加一，因为它们共用一个 number。

从代码中可知，我们在 Child 组件中的 “数字加一” 按钮上利用 $emit 绑定了 number 加一的事件，然后在 Father 组件上使用 $event 获取 $emit 的参数，这就实现了通过子组件修改了父组件的功能。

.sync 修饰符就是上面实现方式的语法糖，也就是 <Child :number.sync="number"/> 是 <Child :number="number" v-on:update:number="number=$event" /> 的简写形式，二者本质上是相同的。