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>

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

我已经试过了

• SO Solution 1
• SO Solution 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>

在

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