Vue中的事件总线bus

如果在跨级或兄弟组件中需要进行通信,多次使用$emit方法会显得繁琐不灵活

该事件总线可以发射与监听事件,就像vue实例一般

在main.js中将$bus加入到vue原型中

Vue.prototype.$bus = new Vue()

在某一组件A中,使用$emit来发射事件,一般用于数据更新的情况

this.$bus.$emit("事件名")

在另一组件B中,使用$on来监听事件,A中数据发生变化,B中可以监听到,再执行后续操作

this.$bus.$on("事件名",function(){
    
     相关操作 })

注意:$bus.on应该在created()中使用,如果在mounted使用,它可能接收不到其他组件来自created()内发出的事件

猜你喜欢

转载自blog.csdn.net/michaelxuzhi___/article/details/106063723