Vue实现任意组件间通信——全局事件总线及消息订阅与发布

目录

1.全局事件总线

安装全局事件总线

触发事件总线

接收参数

销毁

2.消息订阅与发布

订阅

安装全局事件总线

触发事件总线(传参组件)

接收事件总线（收参组件）

解绑

---

1.全局事件总线

案例：

学校与学生分别是两个小组件，装在App大组件中

现点击按钮，将Student的姓名传给School组件中，并在控制台输出

不再利用繁琐的props方法，我们可以创建一个任何组件都可以访问到的东西，它可以传递数据，

我们可以想到的应该是全局的一个组件实例对象VueComponent，它可以调用方法实现功能

VueComponent(vc)是由Vue.extend生成的，每次调用Vue.extend,就会返回一个新的vc，

但是它还必须可以调用监听事件 $on , 销毁 $off 以及 触发$emit 等等，而$on.$off，$emit都在Vue的原型实例(vm)上，所以我们创建的这个全局事件需要vc与vm都可以访问

我们在哪里引用的Vue，就该把这个全局事件在哪里引入，在main.js中，我们创建了总的Vue实例对象。我们只需要借助vm生命周期中最先开始工作的钩子，创建这个全局总线，就形成了所有组件都可以访问到的事件

	将要创建	调用beforeCreat函数
	创建完毕：	调用created函数
	挂载完毕 :	调用mounted函数
	将要更新：	调用beforeUpdate函数
	更新完毕：	调用updated函数
	将要销毁：	调用beforeDestroy函数
	销毁完毕:	调用destroyed函数

                                                                vm的生命周期

在main.js中

安装全局事件总线

new Vue({
  el:'#app',
  render : h=> h(App),

  beforeCreate(){
    // Vue.prototype.x = this//安装全局事件总线
    Vue.prototype.$bus = this
  }
})

$bus就是vue原型上添加的一个vue实例，用于存储、监听以及触发事件

触发事件总线

在传参的组件中：hello作为一个暗号

vc.$bus.$emit('事件名'，‘参数’)

methods: {
    sendStudentName(){
        this.$bus.$emit('hello',this.name)   
    }
},

接收参数

在被传参的组件中：

this.$bus.$on('参数名',(数据)=>{

})

 mounted(){
     console.log('School',this.$bus);
     //借助hello这个东西传递数据
     this.$bus.$on('hello',(data)=>{
         console.log('我是School组件，收到了数据',data);
    })
}

销毁

this.$bus.$off(event)

2.消息订阅与发布

订阅

在控制台 安装库 输入npm i pubsub-js

安装全局事件总线

在被接收数据的组件中安装

import pubsub from 'pubsub-js'

触发事件总线(传参组件)

 pubsub.publish('消息名', 消息内容)

  methods: {
     //触发这个事件就去发布
     sendStudentName() {
         //hello是个信号名，起到为了与其他组件相互联系的作用
         //数据以形参的方式传递
         pubsub.publish('hello', this.name)
        }
    },

 接收事件总线（收参组件）

pubsub.subscribe('消息名', (消息名, 消息内容) => {
})

    mounted() {
        //订阅消息，等待别人去发布消息
        //有两个参数时，第一个是消息名，第二个是消息内容
        //this.pubId:一挂载就去订阅消息，但凡监听到消息名，就去执行那个方法

        //改为箭头函数就可以访问到this(vc)
        this.pubId = pubsub.subscribe('hello', (msgName, data) => {
            console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data);
        })
    },

解绑

    beforeDestroy() {
        pubsub.unsubscribe(this.接受的消息名)
    }

 beforeDestroy() {
     pubsub.unsubscribe(this.pubId)
    }