vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off

vue兄弟组件之间的传值

1、建立一个单独的文件bus.js

import Vue from 'vue'
export default new Vue()

2、传递事件

// 传递事件
import Bus from '你的路径/bus.js'
// 在methods中：
bus() {
  Bus.$emit('eventName', param)
}

3、接收事件

// 接收事件
import Bus from '你的路径/bus.js'
// 在mounted中：
Bus.$on('eventName', (e) => {
  console.log('穿过来的数据' + e)
})

vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面数据叠加

问题定位：

1. 出现无法传值的情况，检查传值过程中组件是否还没有渲染；可能出现的情况是：组件被if，在你使用 Bus.$emit() 时组件还没有渲染出来；
2. 出现点击重复执行情况，检查bus是否使用后销毁;
   使用Bus.$on后，需要生命周期beforeDestroy中销毁：

beforeDestroy() {
  Bus.$off("onSearchwordKey");
}

 

如果对您有所帮助，点个赞收个藏吧~Thanks♪(･ω･)ﾉ (✪ω✪) ᕦ(･ㅂ･)ᕤ！！！