eventBus使用遇到的坑

**问题:**通过eventBus传递的参数,在子组件的methods中无法通过this.使用。
**思路:**考虑组件方法的执行顺序(vue生命周期执行顺序)
**解决办法:**在传递参数的组件外 this.$nextTick

this.$nextTick(() => {
    Bus.$emit('updateOpt', opt, item)
})

eventBus的使用

  1. 创建eventBus.js文件
  2. 在需要传递消息的兄弟组件引入该js文件
  3. 传递消息 bus.$emit(“test”,param1,param2…)
  4. 接收消息 bus.$on(“test”,funciton({ //逻辑 }))

代码如下:







//eventBus.js文件
import Vue from 'vue'

export default new Vue()












涉及到的知识点:nextTick()

nextTick(),是将回调函数延迟在下一次DOM更新数据过后进行调用。
简单的理解就是:当数据更新之后,DOM进行渲染之后将会自动进行执行该函数。
详细解读链接:https://juejin.cn/post/6971017407733170184

你可能感兴趣的:(vue.js,前端)