仅用于一个视图的事件总线

Question

我需要创建一个只在一个页面上工作的事件总线，这很重要，因为我有几个页面(视图(具有相同的事件侦听器名称。还有一些组件也是由组件组成的，我不能只使用全局事件总线。你会采取哪种方法？

Answer 1

对于使用事件总线的解决方案，我会给组件一个prop作为标识，我们将其命名为customId。您可以使用nanoid等库作为默认值，并为目标页面设置自定义值

export default {
name: 'MyComponent',
props: {
customId: {
type: String,
}
},
data() {
return {
innerId: this.customId || nanoid(),
}
}
}

在您的目标页面

<my-component custom-id="event-listener" />

在事件总线中，添加组件的customId作为消息的一部分，因此在MyComponent的每个实例中，只有目标实例会获取数据

YourEventBus.$emit('custom-event', {
target: 'event-listener',
payload: yourData
});