Vue---任意组件间消息订阅与发布（pubsub）

阳光穿透心脏的1/2处 2024-04-07 15:36 65阅读 0赞

**对比全局事件总线学习（不要混）**

[http://t.csdn.cn/4PYmQ][http_t.csdn.cn_4PYmQ]

**目录**

总结

工作模型

下载库

引入库

一、任意组件间消息订阅与发布

student.vue发布消息

重要代码

school.vue接收消息

重要代码

--------------------

## 总结 ##

![350d5e9128144bbfbba21b6d3036b221.png][]

### **工作模型**  ###

![751762e561a44bdd9d64c958dfcd17e7.png][]

### **下载库** ###

![3f48d2a6ed5b4ea5b8650782f1632f69.png][]

### **引入库**  ###

import pubsub from 'pubsub-js'

## 一、任意组件间消息订阅与发布 ##

由student.vue 向school.vue 传输数据

### student.vue发布消息 ###

<template>
    
         
         <div class="student">
            <h2 > 学生名称：{
       {name}}</h2>
            <h2> 学生性别：{
       {sex}}</h2>
            <button @click="sendStudentName">把学生名给School组件</button>
          
         </div>
    </template>
    
     <script>
            import pubsub from 'pubsub-js'
    
            export default {
                name:'Student',
    
                data(){
                    return{
                     name:'张三',
                     sex:'男',
                     age:18
                    }
                },
                methods:{
                  sendStudentName(){
                  // 发布hello消息  带着数据
                  pubsub.publish('hello',this.name)
                  }
                }
            }  
    </script>
    
    <style scoped>
          .student{
            background-color: red;
            padding:5px;
            margin-top:30px;
          }
    </style>

#### 重要代码 ####

import pubsub from 'pubsub-js'

methods:{
                  sendStudentName(){
                  // 发布hello消息  带着数据
                  pubsub.publish('hello',this.name)
                  }
                }

### school.vue接收消息 ###

<template>
         <div class="school">
            <h2> 学校名称：{
       {name}}</h2>
            <h2> 学校地址：{
       {address}}</h2>
    
         </div>
    </template>
    
     <script>
            import pubsub from 'pubsub-js'
    
            export default {
                name:'School',
                data(){
                    return{
                     name:'尚硅谷',
                     address:'北京昌平',
                    }
                },
            mounted() {
                // 订阅hello消息
                // function(msgName,data) 第一个参数是msgName 消息名  第二个参数是data 传过来的数据
                // this.pubId= pubsub.subscribe('hello',function(msgName,data){
                //     console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
                //     // 这里面的this是undefined
                // })
                this.pubId= pubsub.subscribe('hello',(msgName,data)=>{
                    console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
                    // 这里面的this是vc
                })
            },
            beforeDestroy() {
                // 当我们的school组件销毁前，我们取消订阅
                // 这个取消订阅的方式很像定时器，传入一个id取消
                pubsub.unsubscribe(this.pubId)
            },
      
            }
    </script>
    
    <style scoped>
         .school{
            background-color: skyblue;
            padding:5px;
            margin-top:30px;
         }
    </style>

#### 重要代码 ####

import pubsub from 'pubsub-js'

mounted() {
                // 订阅hello消息
                // function(msgName,data) 第一个参数是msgName 消息名  第二个参数是data 传过来的数据
                // this.pubId= pubsub.subscribe('hello',function(msgName,data){
                //     console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
                //     // 这里面的this是undefined
                // })
                this.pubId= pubsub.subscribe('hello',(msgName,data)=>{
                    console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
                    // 这里面的this是vc
                })
            },
            beforeDestroy() {
                // 当我们的school组件销毁前，我们取消订阅
                // 这个取消订阅的方式很像定时器，传入一个id取消
                pubsub.unsubscribe(this.pubId)
            },

[http_t.csdn.cn_4PYmQ]: http://t.csdn.cn/4PYmQ
[350d5e9128144bbfbba21b6d3036b221.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0bc3ab799d5544bd8707b26f44268497.png
[751762e561a44bdd9d64c958dfcd17e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1c65c04f208a4f838d06a028f8880e78.png
[3f48d2a6ed5b4ea5b8650782f1632f69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/121c0ba1d183462ba134ecd97495d803.png