.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。
利用EventBus,子组件触发事件,父组件响应事件并实现数据的更新,避免由子组件直接修改父组件传过来的内容。
举个例子:假如父亲有1000元,儿子想要用这些钱,就需要告诉他的父亲,然后父亲同意后,从父亲那边拿钱给儿子使用,如果没有事先通知就使用,就相当于偷钱,显然不对。
其实父子组件传值的过程等同于是父亲告诉儿子,我有这么些个钱可以用,不是让子组件直接操作这个值。你要用多少,告诉我,然后把用完后会剩余多少告诉我就可以了。
搞清楚了这个逻辑,那么来看一个例子:
child.vue(子组件)
<template>
<div class="child">
{{money}}
<!-- 我要用100 -->
<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>
parent.vue(父组件)
<template>
<div class="app">
App.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>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
这个代码就是上述内容的解释,实现的原理是利用eventBus,在子组件使用$emit('update:money', money-100)
来通知父组件去响应,而父组件则通过$event
来接收经过子组件修改后的值。
<Child :money="total" v-on:update:money="total = $event"/>
这么长的语句得以缩写为:
<Child :money.sync="total"/>
而子组件内也必须用'update:money'
事件名去触发响应
<button @click="$emit('update:money', money-100)">