在有些需求下,对一个子组件的 prop值 进行“双向绑定”。
不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,父组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
这也是为什么我们推荐以update:myPropName的模式触发事件取而代之。
1. 我们常常在父组件中用
<Child :money.sync="total" />
使用.sync语法糖替代:
<Child :money="total" v-on:update:money="total=$event" />
2. 子组件中用
<button @click="$emit('update:money',money-1)">花钱</button>
而不是
<button @click="money-=1)">花钱</button>
这个写法没法修改到外部的props
// App.vue中 ```
<script>
import Child from './Child.vue'
export default{
data(){return{total:1000}},
components:{Child:Child}
}
</script>
<style>
</style>
```
// 子组件Child.vue中
<template>
<div>
这里开始是子组件Child:{{money}}
<hr>
<button @click="$emit('update:money',money-1)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
</style>
// main.js中渲染模板
import Vue from 'vue'
import App from './App'
new Vue({
render:h=>h(App)
}).$mount("#app")