vue全局事件总线

1. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }

   2. 提供数据：this.$bus.$emit('xxxx',数据)

2. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

代码演示

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

在a组件的生命周期钩子中添加事件到事件总线上 回调留在自身

mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},

然后在b组件内触发事件总线上对应的事件

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