Vue中的消息的订阅与发布(pubsub)

  • 与事件总线相似，消息的订阅与发布同样是一种组件间的通信方式，适用于任意组件间通信。
  • 但与之不同的是，消息的订阅与发布是一种编程思想，一种编程理念，使用原生的js很难去实现，所以我们要借助一些第三方库，这里推荐的是 pubsub-js。

使用流程:

  • 1.在终端安装第三方库[pubsub]

    npm i pubsub-js

  • 2.在要使用的组件当中引入pubsub

    import pubsub from 'pubsub-js'

  • 3.接收数据

  • 例如:组件A想要接收组件B的数据,则需要在组件A当中设置相对应的api来订阅消息[subscribe]

    //方法一:在methods中设置回调
    methods(){
      demo(MsgName , data){......}
    }
    ......
    mounted() {
      this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
    }

    //方法二:直接使用箭头函数回调接收数据
    mounted() {
      this.pid = pubsub.subscribe('xxx',(MsgName,data)=>{}) //订阅消息
    }  

  • 4.提供数据

  • 在消息的提供组件当中(组件B)设置相对应的api来发布消息[publish]

    pubsub.publish('xxx',数据)

  • 5.销毁订阅流程(与定时器的销毁流程相似)

    beforeDestroy() {
        // 销毁消息的订阅(这个流程与定时器很相似,需要给他设置一个id)
        pubsub.unsubscribe(this.pubId)
    }

代码解析:

  • School组件(相当于组件A,消息的接收方,调用订阅消息api)

    <template>
        <div class="school">
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>
    </template>

    <script>
        // 首先引入pubsub
        import pubsub from 'pubsub-js'

        export default {
            name:'School',
            data() {
                return {
                    name:'五邑大学',
                    address:'广东江门',
                }
            },
            mounted() {
            // 消息的订阅(后面的回调一般有两个参数,第一个为事件名,第二个为接收的数据)
                this.pubId = pubsub.subscribe('hello' , (MsgName , data)=>{
                    console.log(this);//这里使用箭头函数原因是将this指向Vue
                    console.log('接收到了来自于'+MsgName+'的消息:',data);
                })
            },
            beforeDestroy() {
                // 销毁消息的订阅(这个流程与定时器很相似,需要给他设置一个id)
                pubsub.unsubscribe(this.pubId)
            },
        }
    </script>

  • Student组件(相当于组件B,消息的发布方,调用发布消息api) 

    <template>
        <div class="student">
            <h2>学生姓名：{{name}}</h2>
            <h2>学生性别：{{sex}}</h2>
            <!-- 这里给事件总线设置一个回调函数用于发送姓名 -->
            <button @click="sendStudentName">把学生名给School组件</button>
        </div>
    </template>

    <script>
        // 首先引入pubsub
        import pubsub from 'pubsub-js'

        export default {
            name:'Student',
            data() {
                return {
                    name:'张三',
                    sex:'男',
                }
            },
            methods: {
                sendStudentName(){
                    // 发布消息
                    pubsub.publish('hello',this.name)
                }
            },
        }
    </script>

结果展示:

image