原理
.sync修饰符本质上是语法糖,将代码进行了简化。核心原理是对子组件, 对父组件的pros进行监听并且更新。先把父组件的props传入子组件,如果子组件触发事件,对父组件的props进行修改,.sync就会监听该事件并且更新父组件的props
Vue规则
组件不能修改外部数据props,只能触发事件,通知父组件的props进行修改
this.event可以获取$emit的参数
场景
爸爸有1w块钱,儿子打电话请求爸爸传钱(触发事件),然后进行花费
代码实例
// 儿子组件,从爸爸组件那里请求钱,然后消费
<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>
// 爸爸组件,传钱给儿子,并监听儿子动态
<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>