深入理解 Vue 的 .sync 修饰符

听说有语法糖？
举个栗子: 儿子向爸爸要钱的场景。

//父组件 Parent
<template>
  <div class="app">
    Parent.vue 我现在有 {{total}}
    <hr>
     <!-- <Child :money.sync="total"/> -->
   <Child :money="total" v-on:update:money="total=$event"/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>
复制代码

儿子从爸爸那里知道了可以用多少钱(引用了外部属性，父组件给的)，儿子要向爸爸发出**要钱信号(触发事件)**才能拿到钱,直接拿钱不告备将要挨打。

//子组件 Child
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>
<script>
export default {
  props: ["money"]	//外部属性,
};
</script>
复制代码

• 组件不能修改 props 外部属性
• $emit 可以触发事件。第一个参数为事件名，第二个参数返回结果
• **$event** 会获取到$emit 的第二个参数,即事件的结果
• 原理：当父组件将数据给子组件用时，子组件不能随意修改，必须通知父组件修改，才能实现数据的同步更新。

事实上

<Child :money.sync="total"/>
复制代码

的扩展写法就是

<Child :money="total" v-on:update:money="total=$event"/>
复制代码

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