App.vue:
<template>
<div class="app">
App.vue 我现在有 {{total}}
<Child :money.sync="total"/>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
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>
当click button时，直接触发事件，子组件通知父组件，父组件修改total，完成整个流程。
代码中：
<Child :money.sync="total" />
等价于:
<Child :money="total" v-on:update:money = "total = $event" />
