vue中使用 bus 进行组件之间传值

vue中使用 bus 进行组件之间传值

step 1 、npm安装

npm install vue-bus

step 2、引入

// 在 main.js 引入
import VueBus from 'vue-bus';
Vue.use(VueBus);

step 3、使用

组件A中

// 传值
this.$bus.emit("eduTest",{title:"hello world"})

组件B中

// 监测传值
this.$bus.on("eduTest",res=>{
    console.log(res)
})

step 4、【备注】

bus使用频繁可能会导致 vue 事件总线 （eventBus） $（on） 被多次触发，造成 bus 堆叠。所以我们在这时候可以在调用之前就将之前的监测给解绑销毁。

组件B中

// 销毁bus
this.$bus.off("eduTest")
// 监测传值
this.$bus.on("eduTest",res=>{
    console.log(res)
})