场景:father组件 要像 son组件 传递数据(使用全局事件总线)
情况一:son接收的数据只读,修改(更新)在传递数据的组件father中
不进行任何其他操作时(如下),father仅在初始化的时候传递数据给son,后续father更新后son中的数据不会随之更新
father组件
data() {
return {
son:{
name: '宝宝',
sex: '女'
}
}
},
mounted() {
// this.$nextTick 当数据改变后,要基于更新后的DOM展示等时使用,这里用不能实现 $bus 传递数据不能实时更新的问题
/* this.$nextTick(function(){
this.$bus.$emit('mySon',this.son)
}) */
this.$bus.$emit('mySon',this.son)
}
son组件
export default {
name: "Son",
data() {
return {
/* son: {
name: '',
sex: ''
} */
son: {},
};
},
mounted() {
this.$bus.$on("mySon", (val) => {
/* this.son.name = val.name;
this.son.sex = val.sex; */
Vue.set(this.son, "name", val.name);
Vue.set(this.son, "sex", val.sex);
});
},
beforeDestroy() {
this.$bus.$off("mySon");
},
要son 中读到的数据实时更新需要在father组件中添加watch
属性,使数据发生改变时也触发全局事件总线的 “mySon”
father组件
// 保证$bus传递的son数据实时更新
watch: {
son: {
immediate: true,
deep: true, // 深度监视
handler(val) {
this.$bus.$emit('mySon',this.son)
}
}
},
mounted() {
this.$bus.$emit('mySon',this.son)
}
情况二:son接收数据,且在son组件中修改数据,并影响father中的数据
son接收数据时,使用对象接收,因为他是复杂数据类型,传递地址,使他我们指向同一块地址,从而实现双向影响
father组件 关键代码同上面实时更新代码,即 watch 和 mounted 配合使用
son组件
<template>
<div class="son">
<h1>我叫什么名字呢</h1>
<h4>我的名字:{{ son.name }}</h4>
<h4>我的性别:{{ son.sex }}</h4>
<input type="text" v-model="son.name">
</div>
</template>
<script>
import Vue from "vue";
export default {
name: "Son",
data() {
return {
son: {},
};
},
mounted() {
this.$bus.$on("mySon", (val) => {
this.son = val
});
—— 仅含关键代码