理解 Vue 中的 .sync 修饰符

Vue 的子组件想要使用父组件的数据，就需要用 props 传递数据，但我们无法直接在子组件中修改 props ，因为这件事是不被 Vue 允许的，那如果我们就想要在子组件中修改它呢？

Vue 提供了一个名为 $emit  的 API ，通过它我们可以实现这一操作。

• 用法：vm.$emit( eventName, […args] )

子组件上触发自定义事件。附加参数传给监听器回调。父组件监听该自定义事件，根据需要更新一个本地的数据 property。

示例：

// App.vue
<template>
  <div class="app">
    我是父组件： {{ num }}
    <hr />
    <Child :num="total" v-on:update:num="num = $event" />  // $event 可以获取 $emit 的值
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { num: 10000 };
  },
  components: { Child: Child },
};
</script>

// Child.vue
<template>
  <div class="child">
    从父组件传来的数据：{{ num }}
    <button @click="$emit('update:num', num - 100)">
      <span>我要改！</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["num"],
};
</script>

点击查看运行结果

• .sync 修饰符就是简化父组件中监听事件，更新数据这一步骤。

//:num.sync="num" 等价于 :num="total" v-on:update:num="num = $event"

点击查看使用 .sync 修饰符后的代码