Vue-动态组件事件侦听器

Question

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

• 文本
• HTML
• 组成部分

我能够呈现上面所有的值，但是我在绑定事件侦听器时遇到了困难。我试图实现的是这样的：传递一个要绑定到组件的方法和事件，表应该将其绑定到相应的单元格。例如：

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

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

我已经试过了

• 因此，解决方案1
• 因此，解决方案2

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

Answer 1

最好的方法是将方法/处理程序放在父组件中，然后触发器使用emit功能，以便

表组件

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