Vue31 消息订阅和发布

1 简介

　　组件之间的通信除了使用事件总线之外，还可以使用一些插件来通过消息的订阅和发布来实现。pubsub-js就是一个不错的选择。

2 使用

2.1 安装

npm i pubsub-js
# 或
yarn add  pubsub-js

2.2 引入

分别在发布消息（提供数据）的组件和订阅消息（获取数据）的组件中引入

import pubsub from 'pubsub-js'

2.3 订阅消息和取消订阅

　　1）订阅

subscribe('消息名',回调函数)

　　2）取消订阅

unsubscribe('消息id') 

消息的id在订阅时subscribe方法返回  通常在组件destoryed的时候取消订阅

2.4 发布消息

publish('消息名',参数)

2.5 示例

1）main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

　　

2）app.vue

<template>
<div>
    <SchoolComp></SchoolComp>

</div>
</template>

<script>

import SchoolComp from './components/SchoolComp'

export default {
    name:'App',
    components:{
        SchoolComp
    }
}

</script>

　　

3）SchoolComp.vue

　　消息订阅者

<template>
    <div>
        <h1 >{{schoolname}}</h1>
        <StudentComp  ></StudentComp>

    </div>
</template>

<script>
import StudentComp from './StudentComp'

import pubsub from 'pubsub-js'

    export default {
        name:'SchoolComp',
        data(){
            return {
                schoolname:'实验小学1',
                age:18
            }
        },
        components:{
            StudentComp
        },
        mounted() {
            this.msgid = pubsub.subscribe('getName',(name)=>{
                console.log('收到消息：' + name)
            })
        },
        destroyed() {
            pubsub.unsubscribe(this.msgid)
        },

    }
</script>

<style>

</style>

　　

4）StudentComp.vue

　　消息发布者

<template>
    <div>

        <h1>{{stname}}</h1>

        <button @click="cli">发布消息</button>
    </div>

</template>

<script>

import pubsub from 'pubsub-js'

    export default {
        name:'StudentComp',
        data(){
            return {
               stname:'小学生'
            }
        },
        methods: {
            cli(){
                pubsub.publish('getName',this.stname)
            }
        },
    }
</script>

5）效果