【发布时间】：2018-10-24 23:03:14
【问题描述】：
我只是在 vuejs 中将事件总线用于动态组件，但是当我从一个组件发出事件时，我无法在另一个组件中监听该事件。下面是我通过codesandbox创建的演示，我想做的是从test2component输出'test in tes2'，但它什么也没输出。但是当我在 HomeCompnent 中取消注释 $bus 监听器时，两个 console.log 都被执行了。
main.js
Vue.propotype.$bus = new Vue();
主页组件
<template>
<div>
<component :is="currentComponent" @changeComponent="changeComponent"></component>
</div>
</template>
<script>
import Test1Component from "./Test1Component";
import Test2Component from "./Test2Component";
export default {
created() {
// this.$bus.$on("test", () => console.log("event bus test"));
},
components: {
Test1Component,
Test2Component
},
data() {
return {
currentComponent: "Test1Component"
};
},
methods: {
changeComponent() {
this.currentComponent = "Test2Component";
}
}
};
</script>
<style>
</style>
测试1组件
<template>
<div>
<h1>test1</h1>
<button @click="changeComponent">click me</button>
</div>
</template>
<script>
export default {
methods: {
changeComponent() {
this.$emit("changeComponent");
this.$bus.$emit("test");
}
}
};
</script>
<style>
</style>
测试2组件
<template>
<h1>test2</h1>
</template>
<script>
export default {
created() {
this.$bus.$on("test", () => console.log("test in test2"));
}
};
</script>
<style>
</style>
【问题讨论】：
-
我对这个问题投了反对票，因为寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及重现它所需的最短代码 在问题本身。链接到远程站点不满足此要求，因为（1. 链接可能会中断（2. 其他站点可能无法提供所有可访问性调整）
-
@Ferrybig 抱歉，我已经编辑了问题