在有些情况下,我们可能需要对一个 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"/>
效果如下: