非父子通信

vue2
417 词

非父子通信#

event bus 事件总线#

作用：非父子组件之间，进行简易消息传递。（复杂场景还是使用vuex）

  1. 创建一个都能访问得到的事件总线
    （空 Vue 实例）–utils/EventBus.js
1
2
3
import Vue from 'vue';
const Bus = new Vue();
export default Bus;
  1. A 组件（接收方），监听 Bus 实例的事件
1
2
3
Bus.$on('sendMsg', msg => {
    this.msg = msg;
});
  1. B 组件（发送方），触发 Bus 实例的事件
1
Bus.$emit('sendMsg', '这是一个消息');

事件总线

provide & inject#

provide & inject作用：跨层级共享数据

  1. 父组件provide提供数据
1
2
3
4
5
6
7
8
9
10
export default {
    provide() {
        return {
            // 普通类型（非响应式）整型、字符型等
            color: this.color,
            // 复杂类型（响应式）对象、列表等
            userInfo: this.userInfo,
        };
    },
};
  1. 子/孙组件inject取值使用
1
2
3
4
5
6
export default {
    inject: ['color', 'userInfo'],
    created() {
        console.log(this.color, this.userInfo);
    },
};

实例#

准备组件BaseA、BaseB、GrandSon以及父组件App
其中GrandSon组件包含在BaseA组件中
父组件中提供数据如下：

1
2
3
4
5
6
7
8
9
data() {
    return {
        color: 'pink',
        userInfo: {
            name: 'andy',
            age: 18,
        },
    };
},

要想让GrandSon组件使用其数据，就需要在父组件中用provide提供数据

1
2
3
4
5
6
provide() {
    return {
        color: this.color,
        userInfo: this.userInfo,
    };
},

然后在需要使用数据的子孙组件中用inject接收

1
inject: ['color', 'userInfo'],

接收之后就可以正常使用数据了
注意：以provide提供的数据，若是简单数据类型则不是响应式数据，而复杂数据类型数据是响应式的
更推荐使用复杂数据类型数据
017非父子通信_cut_1698118352298
按钮绑定点击事件，点击修改数据
数据修改后可以发现，简单数据类型color是非响应式的
017非父子通信_cut_1698121928842