vue使用bus进行组件通信

EventBus事件总线

简单使用

全局注册

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

Vue.prototype.$EventBus = new Vue()

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

组件A

created () {
    this.$EventBus.$on('advanced',(data)=>{
      console.log('监听到了',data);
    })
},

组件B

methods: {
	onConfirm () {
      this.$EventBus.$emit("advanced", '来自A页面的消息');
    },
}

也可以单独建个文件bus.js

bus.js

import Vue from 'vue'
const bus = new Vue()
export default bus 

组件A

import bus from '@/utils/bus'

created: {
    //第一个参数为标志变量，第二个参数为通信的值
    bus.$emit('message', '来自组件A页面的消息');  
}

组件B

import bus from '@/utils/bus'

created () {
	//第一个参数为标志变量，第二个参数中的e为通信的值
    bus.$on('message', (e) => {
    console.log(e)
})
},

有时候会发生事件只被emit触发了一次，但是回调函数却被执行了多次的现象。这种现象往往发生在页面跳转退出后重新进入的时候。

    destroyed(){
        this.$EventBus.$off("message");
    },