Vue 中的 .sync 修饰符的作用

Vue 中的.sync 修饰符的功能是 : 当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

场景举例：

爸爸给儿子打钱，儿子要花钱怎么办?

答 : 儿子打电话（触发事件）向爸爸要钱。示例如下：

App.vue

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>
<style>
.app {
   border: 3px solid red;
   padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>
 
<script>
export default {
  props: ["money"]
};
</script>
<style>
.app {
   border: 3px solid blue;
   padding: 5px;
}
</style>

效果展示 :

由于这样的场景很常见，所以尤雨溪发明了.sync修饰符。

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

通过查看Vue.js官方文档，.sync 修饰符从 2.3.0 起重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

• 注意

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