直接用vue原型对象上的$on,$emit,组件实例也可以拿到vue原型对象里的$on,$emit ,为什么不直接用,为什么还要安装$bus
在Vue中使用$bus进行事件传递的主要原因是方便组件之间的通信,尤其是在兄弟组件之间传递数据。尽管组件实例也可以访问原型对象上的$on和$emit方法,但是使用$bus可以更加方便的进行事件传递。
具体实现步骤:
1.安装全局事件总线,在main.js中引入Vue并安装VueRouter后,在Vue实例中加入beforeCreate钩子函数,将实例挂载在Vue.prototype.$bus上
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
el:'#app',
render:h=>h(App),
beforeCreate () {
Vue.prototype.$bus = this
}
})
2.在发送方使用$bus.$emit(‘自定义事件名’,传递的值)来触发事件
this.$bus.$emit('custom-event', data)
3.在接收方通过$bus.$on来监听事件,从而进行数据的接收和处理
this.$bus.$on('custom-event', data => {
//处理数据
})
需要注意的是,在使用$bus进行事件传递时,需要保证监听事件先被创建,否则无法正常监听消息。同时,如果路由跳转多个组件重复监听可以在beforeDestroy钩子函数中移除监听,避免监听事件冲突。
如果遇到$on无法获取数据的问题,需要检查监听事件是否在emit之前被创建,并且需要注意组件实例的挂载和取消监听时机是否正确。
使用$bus进行事件传递需要注意代码的规范性和可维护性,避免产生不必要的bug。