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

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

http://t.csdn.cn/4PYmQ

目录

总结

工作模型

下载库

引入库

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

  student.vue发布消息

  重要代码

  school.vue接收消息

  重要代码

---

总结

 

工作模型

 

下载库

引入库

        import pubsub from 'pubsub-js'

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

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

  student.vue发布消息

  重要代码

        import pubsub from 'pubsub-js'

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

  school.vue接收消息

  重要代码

        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)
        },