十一、全局事件总线

1、全局事件总线：任意组件间通信

1. 一种组件间通信的方式，适用于任意组件间通信

2. 安装全局事件总线

   new Vue({
      ......
      beforeCreate() {
         Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
      },
       ......
   }) 
   1
   2
   3
   4
   5
   6
   7

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      1
      2
      3
      4
      5
      6
      7

   2. 提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

5. 为什么我这里全局事件总线叫 bus 呢？你品，你细品！

   1.

---

2、全局总线示意图

---

3、分析一波

①想绑定自定义事件必须能调用$on、$emit、$off

②那就是vc (VueComponent 组件)或者vm (VueModel Vue实例)

③首先确认vc能实现吗？想啥呢？肯定能啊！（extend）

const vmDemo = Vue.extend({}) // 调用基础 Vue 构造器，创建一个“子类”
const zx = new vmDemo() // 实例化一个组件
Vue.prototype.zx = zx // 挂Vue原型上充当全局事件总线

new Vue({
	el:'#app',
	render: h => h(App)
})
1
2
3
4
5
6
7
8

④那vm行吗？vc都行，vm能不行吗？

new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate(){
		Vue.prototype.zx = this
	}
})
1
2
3
4
5
6
7

⑤结果似乎很明显啊，如果是聪明的你，你会选用vc还是vm呢？

⑥什么？你选vc？！赐死！

---

4、CODE

1、项目结构

2、main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate(){
		Vue.prototype.$bus = this
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4、School.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

5、Student.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

---

5、Result

---

6、待办事项案例 · 第四版

只修改了 main.js和含有跨层传递的 App.vue 、TodoList.vue、TodoItem.vue（此处只粘贴变更追加的代码）

1、main.js

new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate(){
		// 安装全局事件总线
		Vue.prototype.$bus = this
	}
})
1
2
3
4
5
6
7
8

2、App.vue

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

3、TodoList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4、TodoItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19