問題：我正在嘗試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
如果需要更多資訊，請告訴我。
uj5u.com熱心網友回復：
最好的方法是在父組件中使用方法/處理程式，然后觸發是使用發射功能，這樣在
表組件
<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) {
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359419.html
標籤：javascript Vue.js Vue 动态组件
下一篇：為什么在使用laravelvue的桌面通知中出現錯誤“UncaughtReferenceError:Vueisnotdefined”？