原理

消息的订阅与发布同样可以实现任意两个组件间的通信

其分为两个步骤：

• 订阅消息
• 发布消息

接下来我们通过一个例子去理解它的步骤：

现在我们想要实现组件A与C之间的通信(假设是组件C发送数据给A组件)：

• 首先组件A要订阅一个消息(我们假设这个消息名叫demo)
• 随后我们再制定一个回调(我们假设这个回调的名字是test)
• 组件C发送消息，并携带着数据(我们也要将这个消息命名为demo)
• C组件一旦发布了消息，因为A组件订阅了这个消息，所以相应的回调函数会被执行，数据以参数的形式传递给了A组件。

所以说这个消息名很重要，你订阅的时候是什么名，你发布的时候就是什么名。

原生js无法轻松的实现消息的订阅与发布。所以我们一般是借助第三方库去完成这个功能。

这里我使用的是pubsub.js，它可以在任意框架中实现消息的订阅与发布。

语法注解

首先我们安装pubsub.js：

npm i pubsub-js

  

 

  
1
 

引入语法：

import pubsub from 'pubsub.js'

  

 

  
1
 

这个引入的pubsub其本质是一个对象

这里我们首先介绍一下，他的相关API：

消息的发布语法：

pubsub.publish('name',value)

  

 

  
1
 

消息的订阅语法：

PubSub.subscribe('name',回调方法)

  

 

  
1
 

注意：
这里的回调函数有两个形参：
第一个形参代表消息名
第二个形参代表传递的数据

取消订阅的语法：

• 取消指定的订阅

Pubsub.unsubscribe('name')

  

 

  
1
 

• 取消所有的订阅

PubSub.clearAllSubscriptions()

  

 

  
1
 

代码实操

我们沿用全局事件总线中的代码。仍然是Student组件向School组件发送学生姓名。

组件结构

首先因为School组件是消息的接收方，所以我们先在School组件中进行消息的订阅：

<template>
        <div class="demo">
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <hr>            
        </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'DongBei',
        data(){
            return {
                name:'NEFU',
                address:'哈尔滨',
            }
        },
        // props:['getSchoolName'],
        methods:{
            studentNameDeliver(name,data){
                console.log('School组件已经接收到了来自Studennt组件的学生名称',data)
            }
        },
        mounted() {    
            pubsub.subscribe('studentName',this.studentNameDeliver)
        },
    }
</script>

<style >
    .demo {
        background-color: yellow;
    }
</style>

  

 

  
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
 

然后我们再在Student组件中进行消息的发布：

<template>
    <div class="demo">
        <h2 class="stu" >学生名称:{{name}}</h2>
        <h2 >学生年纪:{{age}}</h2>
        <button @click="deliverStudentName">把学生名称给School组件</button>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'MyStudent',
        data(){
            return {
                name:'张三',
                age:18
            }
        },
        methods:{
            deliverStudentName(){             
                pubsub.publish('studentName',this.name)
            }
        }
    }

</script>

<style >
    /*.demo {*/
    /*    background-color: green;*/
    /*}*/
</style>

  

 

  
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
 

效果：

最后我们还要进行收尾工作，在School组件中进行消息订阅的解绑：

消息订阅的解绑有点类似与定时器的关闭：

<template>
        <div class="demo">
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <hr>            
        </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'DongBei',
        data(){
            return {
                name:'NEFU',
                address:'哈尔滨',
            }
        },
        methods:{
            studentNameDeliver(name,data){
                console.log('School组件已经接收到了来自Studennt组件的学生名称',data)
            }
        },
        mounted() {           
            this.pubsubId = pubsub.subscribe('studentName',this.studentNameDeliver)
        },
        beforeDestroy() {            
            pubsub.unsubscribe(this.pubsubId)
        }


    }
</script>

<style >
    .demo {
        background-color: yellow;
    }
</style>

  

 

  
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
 

注意：按照下图这种写法的话

这里的this是undefined
为了避免出错这里的回调函数，有两种写法：
①methods中写，再引入
②写成箭头函数

总结

消息订阅与发布（pubsub）

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

2. 使用步骤：

   1. 安装pubsub：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)去取消订阅。

文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/zyb18507175502/article/details/125571713