Vuejs -冒泡自定义事件
在组件中使用组件时，是否存在允许事件冒泡的方法？
我的应用程序是一个动态菜单。动态菜单是一个组件(dyn-menu)，它为每个<li>元素使用一个本地组件(menu-item)。每个<menu-item>都有一个与其关联的单击处理程序，该处理程序发出一个自定义事件(在完整的实现中带有菜单项的ID )。但是应用程序没有看到<menu-item>发出的事件，因为它们没有冒泡。
是否有一种方法允许<menu-item>组件(它是<dyn-menu>组件的本地组件)发出事件，并且仍然允许vapp查看和处理事件？
我对Vuejs很陌生，所以我可能错过了一些显而易见的东西。我有可能用两个组件来解决这个问题，而这并不是最好的解决方法。有没有更好的方法来接近它？
这是一个小提琴。您必须删除@dyn-menu-item-click='itemClick'模板中的<dyn-menu>行，以说明如果组件不处理事件，事件不会冒泡。如果删除了该行，那么<dyn-menu>将不会处理该事件，但vapp也不会看到该事件。
回答 2
Stack Overflow用户
发布于 2019-03-01 07:39:58
我知道有四种选择
- 重新发出事件就像你做的那样
- 在子组件上使用
this.$parent(重复)访问所需的父组件并发出事件。(请参见下面“实现您自己的冒泡事件插件”) - 使用父级和子级中的
provided的事件总线。 - 使用Vuex存储并将事件推送到子组件中的事件队列中。在应用程序的其他地方，查看新元素的反应性事件队列，或者将其绑定到某个元素。
实现您自己的冒泡事件插件
这很简单。这个插件增加了一个新的$bubble方法，向他们的父母发出气泡的事件。我考虑过发布一个插件来实现这个功能，但是它太简单了，所以开销是不值得的。
// Add this as a Vue plugin
Vue.use((Vue) => {
Vue.prototype.$bubble = function $bubble(eventName, ...args) {
// Emit the event on all parent components
let component = this;
do {
component.$emit(eventName, ...args);
component = component.$parent;
} while (component);
};
});
// Some nested components as an example
// note usage of "$bubble" instead of "$emit"
Vue.component('component-c', {
template: `
<button type="button" @click="$bubble('my-event', 'payload')">
Emit bubbling event
</button>`,
});
Vue.component('component-b', {
template: `<component-c @my-event="onMyEvent" />`,
methods: {
onMyEvent(...args) {
console.log('component-b listener: ', ...args);
},
},
});
Vue.component('component-a', {
template: `<component-b @my-event="onMyEvent" />`,
methods: {
onMyEvent(...args) {
console.log('component-a listener: ', ...args);
},
},
});
var vapp = new Vue({
el: '#app',
methods: {
onMyEvent(...args) {
console.log('root listener: ', ...args);
},
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<component-a @my-event="onMyEvent" />
</div>
事件总线
事件总线如下所示：
Vue.component('dyn-menu', {
components: {
'menu-item': {
template: '<li @click="itemClick">{{item.text}}</li>',
props: ['item'],
inject: ['eventBus'], // <-- Inject in the child
methods: {
itemClick() {
// Emit the event on the event bus
this.eventBus.$emit('dyn-menu-item-click', ['menu-item dyn-menu-item-click']);
}
}
}
},
// ...
});
var vapp = new Vue({
el: '#app',
data: {
// ...
eventBus: new Vue(),
},
provide() {
return {
// The parent component provides the event bus to its children
eventBus: this.eventBus,
};
},
created() {
// Listen to events on the event bus
this.eventBus.$on('dyn-menu-item-click', this.menuClick);
},
methods: {
menuClick(message) {}
}
})工作示例：https://jsfiddle.net/7vwfx52b/
这里列出了大量的事件总线插件：https://github.com/vuejs/awesome-vue#custom-events
Stack Overflow用户
发布于 2019-04-23 15:43:33
从Vue 2.4开始，组件可以通过$listeners属性访问父程序的侦听器。您可以通过将属性v-on="$listeners"添加到这些子元素的标记中，将组件通过父元素的侦听器传递给特定的子元素。请看https://v2.vuejs.org/v2/api/#vm-listeners的文档。
您还可以使用诸如：@dyn-menu-item-click=$listeners['dyn-menu-item-click']这样的属性转发特定事件。
它仍然不是真正的冒泡，而是一种不那么冗长的重新发射事件的方式。
https://stackoverflow.com/questions/41993508
复制相似问题
腾讯云开发者
