javascript - Vue - 动态组件事件监听器

Question

问题：我正在尝试table为我的应用程序创建一个组件，其他组件将使用该组件来呈现表格。它可能有三个可能的单元格值：

• 文本
• HTML
• 零件

我能够呈现所有上述值，但我被困在绑定event侦听器上。我想要实现的是这样的：传递要绑定到组件的方法和事件，并且表应该将其与相应的单元格绑定。例如：

表 JSON

{
   "cell-1":{
      "type":"html",
      "data":"<h4>text-1</h4>",
      "method": someMethod
   }
}

表格组件

  <tbody>
   <template>
      <tr>
         <td  >
            <span
               v-if="type == 'html'"
               v-html="data"
               v-on:click.native="$emit(someMethod)"
               v-on:click.native="someMethod"
               ></span>
         </td>
      </tr>
   </template>
</tbody>

上面只是我正在尝试的一个片段，表格循环遍历传递的对象并相应地呈现。

我已经试过了

• SO解决方案1
• SO解决方案2

如果需要更多信息，请告诉我。

Answer 1

最好的方法是将方法/处理程序放在父组件中，然后触发使用发射功能，这样在

表格组件

  <tbody>
   <template>
      <tr>
         <td  >
            <span
               v-if="type == 'html'"
               v-html="data"
               v-on:click.native="$emit('trigger-handler', {method: 'method1', data: {}})"
               ></span>
         </td>
      </tr>
   </template>
</tbody>

并且在

父.vue

<table-component @trigger-handler="triggerHandler" />

内部脚本

export default {
 data() {
 },
 methods: {
  triggerHandler(payload) {
   // payload is actually the object passed from the child
   this[payload.method](payload.data); // call a specific method
  },
  method1(data) {
  },
  method2(data) {
  },
  method3(data) {
  }
 }
}