当前位置: 首页 > Web前端 > vue.js

vueEventBus事件总线组件之间的通信

时间:2023-03-31 23:51:25 vue.js

EventBus的使用方法1.创建事件总线并导出utils-bus.jsimportVuefrom'vue';//使用事件总线constbus=newVue();exportdefaultbus;2.导入utils-bus.js,并应用importbusfrom'@/utils/bus';假设你有两个需要通信的Vue页面:A和B,A页面在按钮上绑定点击事件,发送消息,想要通知PageB。组件之间通过EventBus进行通信,收起侧边栏作为一个示例3.发送事件A=>Bthis.collapse=!this.collapse;bus.$emit('collapse',this.collapse);4.接收事件BReceiveAbus.$on('collapse',msg=>{this.collapse=msg;})5.剔除事件如果业务有重复操作的页面,EventBus在监听的时候会触发很多次,这也是一个非常大的隐患。当vue页面被销毁时,EventBus事件监听器也会被移除。销毁(){总线。$off('崩溃');},