【前言】

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。 推荐以 update:myPropName 的模式触发事件取而代之

【目录】

1. 场景描述
2. 代码实例
3. 代码解析
4. 语法糖.sync
5. 总结

【正文】

一. 场景描述

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

答：儿子打电话(触发事件)向爸爸要钱

二.代码实例

//App.vue
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <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>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

//Child.vye
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

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


<style>
.child {
  border: 3px solid green;
}
</style>

三.代码解析

Vue规则：

1. 组件不能修改props外部数据

2. this.$emit可以触发事件，并传参

3. $event可以获取$emit参数($emit、$event，Vue内置Eventbus)

子组件

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

触发update:money事件，并传入参数money-100

父组件

<Child :money="total" v-on:update:money="total = $event"/>

绑定子组件money属性等于父组件total属性

监听子组件update:money事件，并执行total = $event(money-100)

四.语法糖.sync

<Child :money="total" v-on:update:money="total = $event"/>

等价于

<Child :money.sync="total" />

总结

• .sync 修饰符，是一个Vue 中重要的语法糖，它可以快速实现组件间的通信
• 它会被扩展为一个自动更新父组件属性的 v-on 监听器