第二十三章 Vue组件通信之非父子组件通信

目录

一、引言

1.1. event bus 事件总线

1.1.1. 实现步骤

1.2. provide & inject

1.2.1. 实现步骤 

二、event bus事件总线完整代码

2.1. 工程结构图 

​2.2. main.js

2.3. App.vue

2.4. EventBus.js

2.5. BaseC.vue

2.6. BaseB.vue

2.7. BaseA.vue

三、provide & inject

3.1. 工程结构图

3.2. main.js

3.3. App.vue

3.4. GrandSon.vue

3.5. SonA.vue

3.6. SonB.vue

一、引言

前面几个章节我们重点讲解了在Vue中组件的关系类别及父子组件的通信解决方案，本章内容将详细讲解关于非父子组件间的通信解决方案。那么非父子组件的通信我们分为两种：

1.1. event bus 事件总线

作用：非父子组件之间，进行简易消息传递。(复杂场景 → Vuex)

1.1.1. 实现步骤

1. 创建一个都能访问到的事件总线 (空 Vue 实例) → 在utils包下创建EventBus.js

2. A 组件(接收方)，监听 Bus 实例的事件

3. B 组件(发送方)，触发 Bus 实例的事件

1.2. provide & inject

1.2.1. 实现步骤 

1. 父组件 provide 提供数据