场景:子组件需要通过修改父组件传递过来的prop去改变父组件的状态的时候,即父子组件实现双向绑定。
原理:在父组件里监听到了update这个事件,并且更新了传递过来的prop的值。
父组件
<template>
<div>
{{text}}
<button @click="handleChange">点我改变内容</button>
<SyncData :textData.sync="text"/>
</div>
</template>
<script>
import SyncData from './components/syncData.vue';
export default {
components: {
SyncData
},
data () {
return {
text: "我是父组件"
}
},
methods: {
handleChange() {
this.text = '我还是父组件'
}
}
}
</script>
子组件
<template>
<div>
<button @click="changeText">
点我改变父组件的值
</button>
</div>
</template>
<script>
export default {
props: ["textData"],
methods: {
changeText() {
this.$emit('update:textData', '我是子组件')
}
}
};
</script>
.sync实际上是语法糖,完整的写法是:
<template> <div> {{text}} <button @click="handleChange">点我改变内容</button> <SyncData :textData.sync="text"/> <!-- 因为子组件里使用$emit是回调函数,所以子组件传的值就是这里的value --> <!-- <SyncData v-bind:textData="text" v-on:update:textData="value => text = value"/> --> <!-- <SyncData :textData="text" @update:textData="text=$event"/> --> </div> </template> <script> import SyncData from './components/syncData.vue'; export default { components: { SyncData }, data () { return { text: "我是父组件" } }, methods: { handleChange() { this.text = '我还是父组件' } } } </script>