想一下这样的场景：数据由父组件管理，子组件可以接收父组件的数据，当子组件需要修改父组件传递过去的值时，应该怎么操作？
-
方案一 子组件直接修改? 不可行方案，因为会触发
vue的保护机制，因为并不符合数据的逻辑，因为父组件只是把值告诉了子组件。 -
方案二 子组件通知父组件修改？ 可行方案，因为数组在父组件中，当子组件需要修改值时，应该是通知父组件去修改。
//child.vue
<template>
<div class="child">
{{ money }}
<!-- 我要用100 -->
//方案一
<button @click="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="total" />
//方案二
<!-- 语法糖式写法 -->
<!-- <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>
子组件利用$emit('update:money', money-100)向父组件传递事件，updata:money为事件名，money-100为事件，父组件通过$event来接受事件
