十二、消息订阅与发布

1、消息订阅与发布（pubsub-js）

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

2. 使用步骤：

   1. 安装pubsub-js：npm i pubsub-js(安装别的消息订阅库也可以哦！)

   2. 引入: import pubsub from 'pubsub-js'

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx', this.demo) //订阅消息
      }
      1
      2
      3
      4
      5
      6
      7

   4. 发布消息提供数据：pubsub.publish('xxx',数据)

   5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

---

2、消息订阅与发布示意图

---

3、CODE

1、项目结构

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

3、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
34
35
36
37
38
39
40
41
42

4、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
31
32
33
34
35
36

---

4、Result

---

5、待办事项案例 · 第五版（目前更推荐第四版全局事件总线实现）

只修改了 App.vue 、TodoItem.vue（此处只粘贴变更追加的代码）

1、App.vue

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

2、TodoItem.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