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