<template id="parentComp">
<child-comp-1 @customEvent="handler"/>
<child-comp-2 @customEvent="handler"/>
</template>
由于我收到相同的事件并为这两个事件使用相同的事件处理程序,是否有一种方法可以共同监听它们,即我可以使事件像本机事件一样冒泡并使用类似
的内容 <template id="parentComp" @customEvent="handler">
答案 0 :(得分:1)
除了将事件传递给父母之外,您还可以使用事件总线。本文很好地描述了这个原则:https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860
这个想法是使用共享的Vue实例来处理事件。然后,您将以不同的元素导入此实例,方法与导入库的方式相同。
答案 1 :(得分:0)
您可以使用$ listeners进行事件冒泡。举个例子
Vue.component('inner-com',{
template: '<div>inner component<button @click="innerClick">emit event</button></div>',
methods: {
innerClick () {
this.$emit('inner-com-click-event');
}
}
})
Vue.component('middle-com',{
template: '<div>middle component<inner-com v-on="$listeners"></inner-com></div>'
})
Vue.component('outer-com',{
template: '<div>outer component<middle-com v-on="$listeners"></middle-com></div>'
})
var app = new Vue({
el:'#app',
methods: {
eventHandler () {
alert('event receved')
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<outer-com @inner-com-click-event="eventHandler"></outer-com>
</div>
答案 2 :(得分:0)
从多个组件进行监听。 从根级别发出并监听事件
this.$root.$emit('myTestEvent',dataToBeSent);
现在您可以使用
从任何组件进行监听mounted(){
this.$root.$on('myTestEvent', (dataReceived) => {
//...
})
}