1. Vue的几个规则：
- vue不允许子组件修改父组件数据，一免数据改动的来源不明
- 子组件通过this.$emit('update:foo',newValue)触发事件(事件发布)
- 父组件监听子组件并通过$event获取"newValue",根据需要更新数据(事件订阅)
2. 示例
准备两个文件App.vue和Child.vue
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.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>
解释
App.vue将total的值赋值给money，然后Child.vue通过props接收了money的值。当button触发click时，会使$emit将money-100发送给App.vue。然后App.vue通过v-on接收了数据，并将money-100的值赋值给total，最后将total的值显示在div标签中，从而实现对数据的修改
3. .sync修饰符的出现
由于这种操作很常见，所以尤雨溪发明了 .sync
将<Child :money="total" v-on:update:money="total = $event"/>简化为<Child :money.sync="total">
简单来说 .sync 就是监听是否有人修改本地的数据，如果有的话就对本地数据进行一个修改。
