作者:魅力无穷2 | 来源:互联网 | 2023-05-31 14:36
一.什么是全局事件总线?1.一种组件间通信的方式,适用于任意组件间通信。是根据VueComponent.prototype.__proto__Vue.prototype的原理来进行
一.什么是全局事件总线?
1.一种组件间通信的方式,适用于任意组件间通信。
是根据VueComponent.prototype.__ proto__ = Vue.prototype的原理来进行全局引用
二.全局事件总线的使用?
(i)安装全局事件总线
在main.js中的vue实例中写入beforeCreate
其中bus可以改其他名字,this指定vue实例
(ii)使用事件总线(分为两步:传递数据,接收数据)
我这总共用两个组件:school组件、student组件
1.student组件向school组件传递数据
使用emit传递数据(此组件为student组件)
传递数据写法:this.$bus.$emit('xxxx',数据)
2.school组件接收student传来的数据
使用on接收数据(此组件为school组件)
接收数据写法:this.$bus.$on('xxxx',data=>{.......})
接收的函数要用箭头函数,this指向VueComponent,如果是普通函数则指向Vue函数
3.最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
4.结果: