vue2采用非父子事件监听问题

梦想树上的死耗子
  • 12

根本官网兄弟组件通信的实例我写了一个bus总线。

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

然后保存为bus.js并且在各个引用的组件文件中import引入。

在一个组件A里$emit了一个事件。

callbacklien () {
        Bus.$emit('main')
        Bus.$emit('main_data', this.basedata, this.formItem.select)
      }

另外两个组件B 和C 里$on这个事件状态

组件B代码:

  mounted: function () {
    Bus.$on('main', () => {
      this.url_link('sql', ['工单', '表结构修改申请'], '1')
    })
  }

组件C代码:

    mounted: function () {
      Bus.$on('main_data', () => {
        this.bus_state(['已完成', '进行中', '待进行'], 1, 'two')
      })
    }

结果B成功监听到main事件

C没有监听到main_data事件

请问这是什么原因导致的呢 B是C的父组件

回复
阅读 2.1k
4 个回答

<your-component-b @main_data="main_data"></your-component-b>

把监听方法写在created()里

组件C 还未挂载吧?

如果你的B和C都同时在dom中存活,A触发emit后,C没有收到的话,只能说明在A发出main_data事件后,C组件的mounted钩子还没被执行到。
可以试一下在created中监听事件。

宣传栏