如何動態呈現vue.js組件？

Question

沒有人知道動態呈現vue.js組件的方法嗎？例如，我有應根據道具定義呈現不同按鈕的表格組件：

Vue.component('my_table', { 
    template: '#my_table', 
    props: { 
     data: Array, 
     columns: Array, 
     actions: Array 
    } 
}); 

理想的情況下，我的模板將在tmpl值我action對象的定義：

<tbody> 
    <tr v-for="entry in data"> 
     <td v-for="key in columns"> 
     {{entry[key.field]}} 
     </td> 
     <td v-for="action in actions"> 
     {{ action.tmpl }} 
     </td> 
    </tr> 
</tbody> 

這裏的我的小提琴：

https://jsfiddle.net/zfya92dh/43/

人有什麼想法？

在此先感謝！

Answer 1

<component :is="action.tmpl"></component> 

這是你的小提琴revised。

const button1 = Vue.extend({ 
    template:'<button class="btn btn-primary">View</buttton>' 
}) 

const button2 = Vue.extend({ 
    template:'<button class="btn btn-primary" @click="some_method">Delete</buttton>', 
    methods:{ 
    some_method(){ 
     alert('clicked') 
    } 
    } 
}) 

和相關數據。

data: { 
    actions: [ 
    { 
     name: 'view', 
     label: 'View Company', 
     method: 'click', 
     tmpl: button1 
    }, 
    { 
     name: 'delete', 
     label: 'Delete Company', 
     method: 'click2', 
     tmpl: button2 
    }, 
    ], 

Answer 2

你只想插入HTML而不是純文本？更改

<td v-for="action in actions"> 
    {{ action.tmpl }} 
</td> 

到

<td v-for="action in actions" v-html="action.tmpl"></td> 

但是，如果你的HTML包括Vue的標記，該標記不會得到尊重。您將需要創建實際組件來表示每個配置，然後使用:is告訴Vue在給定時間使用哪一個。 Vue不使用基於字符串的模板，因此無法傳遞模板字符串。