Vue$BUS的全局事件 $bus 组件通信的使用 和 pubsub的消息订阅与发布

@TOC

如题Vue的全局事件 $BUS组件通信的使用类似消息订阅与发布

以下都是个人看法

第一 全局注册 $bus 挂载到 vue的prototype上

bus 事件总线的导入 把\bus挂载到Vue的对象原型身上 在 ==main.js== 导入

第一种方法: main.js中写

// $bus 事件总线的导入  
Vue.prototype.$bus = new Vue()

第二种方法: vue构造里面写

new Vue({
  name: 'App',
  rander: h => h(App),
  beforeCreate () {
 	Vue.prototype.$bus = this 
 }
})

第二 发布事件 $bus.$emit('name', data)

注册事件 里面 比如点击div ==发送事件==

<div @click="handle"></div>
// vue 方法里面
export default {
  name: 'LeaderBoard',
	methods: {
		handle () {
		this.$bus.$emit('事件的名字', Data) // 第一个参数事件的名字  第二个参数 Data 要携带的数据 没有可以不写
		}
	}
}

第三 接收事件 $bus.$on('name', data)

在组件的生命周期函数里面写 ==接收事件==

export default {
  name: 'LeaderBoard',
  mounted: {
   this.$bus.$on('事件的名字', Data / () => { // 第一个参数事件的名字  第二个参数 Data 要接收的数据 没有可以不写
		// 需要操作的事情
	})
  }
}
</script>

第四可以选择组件销毁时关闭事件总线$bus,不占用事件

export default {
  name: 'LeaderBoard',
  mounted: {
   this.$bus.$on('事件的名字', Data / () => { // 第一个参数事件的名字  第二个参数 Data 要接收的数据 没有可以不写
		// 需要操作的事情
	})
  },
  beforeDestroy () {
  	this.$bus.$off('事件的名字') // 取消一个
  	this.$bus.$off() // 取消全部
  }
}
</script>

pubsuh

1. 一种组件间通信的方式，适用于任意组件间通信。
2. 使用步骤: 1.安装pubsub: npm i pubsub-js 2.引入:import pubsub from 'pubsub-js' 3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
demo(data){......}
}
......
mounted() {
	this.pid = pubsub.subscribe( 'xxx ' ,this.demo) //订阅消息
}

4. 提供数据: pubsub.publish( 'xxx ' ,数据)
5. 最好在beforeDestroy钩子中，用 PubSub.unsubscribe(pid)去取消订阅。