Vue 中在某些情况下需要用到数据的双向绑定,但如果实现真正的双向数据绑定会给代码维护带来一定的困难,会引起父子组件都以更改数据容易混乱
Vue 使用 `update:myPropName
` 的模式触发事件取而代之
基础例子
Child.vue
<template>
<div class="child">
{{childNumber}}
<button @click="$emit('update:childNumber', childNumber + 1 )">
// 子组件触发了 update:childNumber 事件
<span>我要+1</span>
</button>
</div>
</template>
<script>
export default {
props: ["childNumber"] // 给父组件传一个外部属性 childNunmber
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
App.vue
<template>
<div class="app">
我是父组件 我现在也要 {{parentNumber}}
<hr>
<Child :childNumber="parentNumber" v-on:update:childNumber="parentNumber = $event"/>
// 父组件监听了 update:childNumber 事件
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { parentNumber: 0 };
},
components: { Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
<Child :childNumber="parentNumber" v-on:update:childNumber="parentNumber = $event"/> 这行代码太长了,所以 Vue 发明了一种修饰符 .sync 可以封装监听事件的操作
可以改为 <Child :childNumber.sync="parentNumber" />,本质来说其实 .sync 是一个 语法糖
$event 保存了 $emit 的参数(childNumber + 1)
本文正在参加“写编程博客瓜分千元现金”活动,关注公众号“饥人谷”回复“编程博客”参与活动。