在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
尤雨溪规定了Vue规则：
组件不能修改props外部数据
this.$emit可以触发事件，并传参
$event可以获取$emit的参数
我们假定一个场景，父亲有钱，要给儿子用。
App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event”/>//把花掉的钱记录在$event
//<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>
.child { border: 3px solid green; }
</style>
解析：
儿子（通过外部数据）拿到这个钱，但是不能直接对这个钱进行操作，（因为不能操作外部数据），我们通过this.$emit触发一个事件，把花钱的事情告诉父亲。所以父亲就要对儿子花钱的动作进行一个监听，如果儿子花钱了，就把画的钱告诉父亲。那么为了知道儿子花了多少钱，需要把这个值存在一个变量上，这个变量是$event。v-on:update:money = "total = $event"监听事件(update:money)获取$event。被封装成了修饰符.sync。
<Child :money.sync='total'/>
//等于<Child :money='total' v-on:update:money = "total = $event"/>
效果如下：
o58s6-ldl9l.gif
