Question

我使用global bus来管理组件之间发生和接收的事件（兄弟姐妹与子女同父母）。 bus被定义为window.bus = new Vue()（我知道不推荐，但我未能以可持续的方式使用import。

它工作正常，但这种方法的一个缺点是我必须在我的组件的模板中使用处理程序：

<template>
(...)
<div v-for="c in aList" v-on:click="emitcasedetails(c)">something</div>
(...)
</template>

<script>
export default {
    (...)
    methods: {
        emitcasedetails: function (c) {
            bus.$emit('casedetails', c._source)
        },
    (...)
}
</script>

同样，这很好但需要额外的代码。

我试着直接

<div v-for="c in aList" v-on:click="bus.$emit(c._source)">something</div>

但运行应用时未定义bus。

是否可以直接引用组件模板中的总线，或者我是否必须通过处理程序？

Answer 1

您可以将总线初始化为数据属性，如下所示：

data: {
    eventBus: bus
}

然后你可以在模板中这样做：

<div v-for="c in aList" v-on:click="eventBus.$emit('casedetails',c._source)">something</div>

但我更喜欢你正在做的第一种方法更好

Answer 2

如果您有一个全局总线用于所有Vue组件，您可以将其添加到Vue原型中，如下所示：

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

然后，每个Vue实例将通过this.$bus引用该总线，该引用可以在任何模板中直接访问：

<div v-on:click="$bus.$emit(c._source)">something</div>

是否可以在组件模板中引用全局总线？

2 个答案: