How to listen on all component events? - vuejs2

Question

The grid component grid.js:
<template>
<div class="grid">
...
<component v-for="c in cells" :is="c.componentName"></component>
</div>
</template>
<script>
export default {
props: {
cells: { type: Array, required: true }
}
methods: {
// the idea what I need
reEmitAllCellComponentEventWithPrefix($event) {
// add prefix
this.$emit("cell-" + $event.name, $event.data);
}
}
}
</script>
The base-cell component base-cell.js (define common cell props and methods):
export default {
props: ['componentName', 'columnIndex', 'rowIndex', 'cellData', ...],
...
}
The custom-cell component custom-cell.js (all extend from base-cell component, register global):
<template>
<dom ...>
</template>
<script>
import baseCell from "./base-cell"
export default {
extends: baseCell,
props: {
componentName: '...',
customProp1: '...',
...
},
watch: {
// a custom event example
customProp1(){
this.$emit('custom-event1', ...)
}
},
...
}
</script>
All the cell components has its own custom events, maybe any event-name.
The usage:
// dom
<div id="app">
<grid :cells="cells" #cell-custom-event1="customCellEventHandler"></grid>
</div>
// js
import grid from "./grid"
new Vue({
el: '#app',
data: { cells: ... },
method: {
customCellEventHandler($event){
...
}
},
...
})
I wanna user can listen on cell component's custom event with prefix cell- when use grid component. How can I make this work?

Answer 1

You can do it like this:
<template>
<div class="row">
<component v-for="c in cells" :is="c.componentName" #click="onClick(c.name, c.data)"></component>
</div>
</template>
<script>
export default {
props: {
cells: { type: Array, required: true }
}
methods: {
onClick(name, data) {
this.$emit("cell-" + name, data);
}
}
}
</script>
Basically when you look through the cells and create the elements, you add a click event for each cell and add whatever parameters you want, and use them to emit the event.
If you also need the "event" data you can add $event in #click="onClick(c.name, c.data)" like this #click="onClick(c.name, c.data, $event)" and then you can add on the method the respective paramater onClick(name, data, e)
I hope this was what you were looking for.