事件总线,数据的传递----兄弟组件
vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系,该如何通信了?
- 先在main.js文件将$bus加入到Vue实例,这是全局EventBus
//将事件挂载到vue实例中
Vue.prototype.$bus=new Vue()
2.假如有两个组件需要进行通信,组件A,组件B需要进行通信,可以在A中通过$emit进行发送
methods:{
imgload(){
//itemimgload是发送出去的事件
this.$bus.$emit('itemimgload','传递的参数')
}
3.在B组件中进行接收,$on进行接收
//回调函数会接收所有传入事件触发函数的额外参数。
this.$bus.$on('itemimgload',callback)
4.EventBus 在监听的时候就会触发很多次,也是一个非常大的隐患通常会用到,在vue页面销毁时,同时移除EventBus 事件监听。,通过$off关闭事件总线
this.$bus.$off('itemimgload',this.itemlisten)
//发送参数传递的事件,以及要取消的回调函数