Vue学习：消息订阅与发布

订阅消息：消息名

发布消息：消息内容

使用的插件：pubsub-js（publish发布 subscribe 订阅 ）

首先:终端安装

 npm i pubsub-js

首先需要数据的订阅数据的对象--即收数据的对象 引入该库 --学生给学校发 消息学校订阅

    import pubsub from'pubsub-js'

消息订阅完成后要销毁--法1

传递的参数（消息名称，消息内容）

pubsub.subscribe--- pubsub.unsubscribe 订阅

pubsub.publish---发布

      mounted() {
            /*挂载完成订阅消息*/  
            this.pubId=pubsub.subscribe('send',(msgName,data)=>{
                console.log(this)//vm 如果写function就不是了
                console.log('有人订阅了send消息，send消息回调执行了',msgName,data)
            })
        },
        beforeDestroy() {
            // this.$bus.$off('send');//销毁
            pubsub.unsubscribe(this.pubId)
        },

法2：使用method this指向正确

        methods: {
            demo(msgName,data){
                console.log(this)//vm 如果写function就不是了
                console.log('有人订阅了send消息，send消息回调执行了',msgName,data)
            }
        },
        mounted() {
            //console.log(this.x)
            // this.$bus.$on('send',(data)=>{
            //     console.log('school组件，收到了数据:',data)
            // })
            /*挂载完成订阅消息*/  
            this.pubId=pubsub.subscribe('send',this.demo)
}

发布消息的也要引入插件

   import pubsub from'pubsub-js'

        methods: {
            sendStudentNameToSchool(){
                //触发x的方法 回调在学校里面
                // this.$bus.$emit('send',this.name)
                pubsub.publish('send',this.name)
            }
        },

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

2、使用

安装： npm i pubsub-js

引入： import pubsub from'pubsub-js'（发布的订阅的都要引入）

接收数据的： mounted() {

this.pubId=pubsub.subscribe('xxx',(msgName,data)=>{

有人订阅了xxx消息，send消息回调执行了

})

},

提供数据的： pubsub.publish('xxx',data)

销毁： beforeDestroy()钩子中 pubsub.unsubscribe(this.pubId) 取消订阅

---

但是总线比较多