bus

2019-07-09  本文已影响0人  SecondRocker

当多个组件之间进行通讯时,再使用$children 、$ref就会很麻烦,这时候使用bus会降低复杂度
bus.js

const install = function(Vue){
  let bus = new Vue({
    methods:{
      emit(event,...args){
        this.$emit(event,...args)
      },
      on(event,callback){
        this.$on(event,callback)
      },
      off(event,callback){
        this.$off(event,callback)
      }
    }
  })
  Vue.prototype.$bus = bus
}
export default install

main.js

import bus from './components/bus'

Vue.use(bus)
//b组件中发送消息
this.$bus.emit('message',data)

// 可以在 a组件中 中 接收消息
this.$bus.off('message',(data) => {
      console.log('off event')
});

//停止消息
this.$bus.off('message',() => {
    console.log('off message')
})
上一篇下一篇

猜你喜欢

热点阅读