VueJs：ダイナミックコンポーネントを別のコンポーネントに渡し、レンダリングします

Question

テーブルコンポーネントを作成しようとしています。

グリッドの列メタデータを定義して渡し、配列propとして渡し、実際のデータを別の小道具としてグリッドに渡したいとします。

私はそれを多くの問題なしで達成することができました。

しかし、今は、セルがレンダリングされる方法（同じセルなどの編集削除ボタンを含むコンテンツ）をユーザーが定義/制御できるように、各列定義の一部として動的コンポーネントを渡したいと考えています。

動的コンポーネントを小道具として渡してからこのコンポーネントをレンダリングする方法はありますか？データソースのデータが

[ 
    columns: [{ 
    name: "something", 
    customComponent: SomeCustomComponent 
    }, { 
    name: "another thing", 
    customComponent: AnotherOtherCustomComponent 
    }] 
] 

ようなものになることができ

<parent-comp> 
    <tr class="" v-for="result in dataSource"> 
    <template v-for="column in columns"> 
     <td> 
     <template v-if="column.customComponent"> 
      ######## How do I render this customComponent ######## 
     </template> 
     </td> 
    </template> 
    </tr> 
</parent-comp> 

上記尋ねるが明確でない場合は、この上の明確化/手の込んださせていただきます。

Answer 1

上記のコメントで示唆されているように、テンプレートで動的コンポーネントを使用し、プロパティのコンポーネントの定義を渡すことができます。

console.clear() 
 

 
const ColumnOne = { 
 
    template: `<h1>I am ColumnOne</h1>` 
 
} 
 

 
const ColumnTwo = { 
 
    template: `<h1>I am ColumnTwo</h1>` 
 
} 
 

 
Vue.component("parent-comp",{ 
 
    props:["columns"], 
 
    template:` 
 
    <div> 
 
     <component v-for="column in columns" 
 
       :is="column.customComponent" 
 
       :key="column"> 
 
     </component> 
 
    </div> 
 
    ` 
 
}) 
 

 
new Vue({ 
 
    el:"#app", 
 
    data:{ 
 
    columns:[{ 
 
     name: "something", 
 
     customComponent: ColumnOne 
 
    }, { 
 
     name: "another thing", 
 
     customComponent: ColumnTwo 
 
    }] 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <parent-comp :columns="columns"></parent-comp> 
 
</div>