Vue - 动态组件事件监听器

Question

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

文字
HTML
组件

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

TABLE JSON

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

TABLE 组件

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

以上只是我正在尝试的片段，table 循环遍历传递的对象并相应地呈现。

我已经试过了

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

Answer 1

最好的方法是将 method/handler 放在父组件中，然后触发器使用发射功能，这样

TABLE 组件

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

Vue - 动态组件事件监听器

Vue - Dynamic component event listener

javascript

vue.js

vue-dynamic-components