Vue.js全球事件无效

Question

我有

<component-one></component-one>

<component-two></component-two>
      <component-three></component-three>

组件two包含组件three 。

目前，我在<component-one>中emit一个必须在<component-three>捕获的事件。

在<component-one>我像这样触发事件：

this.$bus.$emit('setSecondBanner', finalBanner);

然后在<component-three>我抓住它：

mounted() {
    this.$bus.$on('setSecondBanner', (banner) => {
        alert('Caught');
        this.banner = banner;
    });
},

但事件从caught ！

我这样定义总线（在我的core.js中）：

let eventBus = new Vue();

Object.defineProperties(Vue.prototype, {
    $bus: {
        get: () => { return eventBus; }
    }
});

这可能有什么问题？ 当我检查vue-dev-tools我可以看到事件已经被触发了！

Answer 1

这是vue1的工作示例。

 Object.defineProperty(Vue.prototype, '$bus', { get() { return this.$root.bus; } }); Vue.component('third', { template: `<div> Third : {{ data }} </div>`, props:['data'] }); Vue.component('second', { template: `<div>Second component <third :data="data"></third></div>`, ready() { this.$bus.$on('setSecondBanner', (event) => { this.data = event.data; }); }, data() { return { data: 'Defautl value in second' } } }); Vue.component('first', { template: `<div>{{ data }}</div>`, ready() { setInterval(() => { this.$bus.$emit('setSecondBanner', { data: 'Bus sending some data : '+new Date(), }); }, 1000); }, data() { return { data: 'Defautl value in first' } } }); var bus = new Vue({}); new Vue({ el: '#app', data: { bus: bus } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script> <div id="app"> <second></second> <first></first> </div> 

Answer 2

您是否尝试在created注册侦听器而不是已mounted ？

另外，为什么使用defineProperties定义总线而不是简单：

Vue.prototype.$bus = new Vue();