Как прослушать все составляющие события?

Question

Компонент сетки 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>

Компонент базовой ячейки base-cell.js (определить общие реквизиты и методы ячейки):

export default {
  props: ['componentName', 'columnIndex', 'rowIndex', 'cellData', ...],
  ...
}

Компонент пользовательской ячейки custom-cell.js (все простираются от компонента базовой ячейки, регистрируются глобально):

<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>

У всех компонентов ячейки есть свои собственные события, может быть любое имя события.

Использование:

// 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){
      ...
    }
  },
  ...
})

Я хочу, чтобы пользователь мог прослушивать пользовательское событие компонента ячейки с префиксом cell- при использовании компонента сетки. Как я могу сделать эту работу?

Answer 1

Вы можете сделать это так:

<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>

В основном, когда вы просматриваете ячейки и создаете элементы, вы добавляете событие щелчка для каждой ячейки и добавляете любые параметры, которые хотите, и используете их для создания события. Если вам также нужны данные «события», вы можете добавить $event в @click="onClick(c.name, c.data)", например, @click="onClick(c.name, c.data, $event)", а затем добавить в метод соответствующий параметр onClick(name, data, e)

Надеюсь, это было то, что вы искали.