Question

我有

<component-one></component-one>

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

组件two包含组件three。

目前emit <component-one>中的<component-three>事件必须在<component-one>中被捕获。

在this.$bus.$emit('setSecondBanner', finalBanner);中我像这样点击事件：

<component-three>

然后在mounted() { this.$bus.$on('setSecondBanner', (banner) => { alert('Caught'); this.banner = banner; }); },我抓住它：

caught

但事件永远不会是let eventBus = new Vue(); Object.defineProperties(Vue.prototype, { $bus: { get: () => { return eventBus; } } });！

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

vue-dev-tools

这里有什么问题？当我检查function.php时，我可以看到该事件已被解雇！

Answer 1

这是vue1的工作示例。

＆＃13;

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
	}
});

＆＃13;

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

＆＃13;

Answer 2

您是否尝试在created而不是mounted注册听众？

另外，为什么要使用defineProperties来定义总线，而不仅仅是：

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

Vue.js全球事件无效

2 个答案: