我正在尝试构建一个表组件。
我想定义并将网格的列元数据作为数组道具传递,并将实际数据作为另一个道具传递给网格。
我能够在没有太多问题的情况下实现这一目标。
但是,现在我想将动态组件作为每个列定义的一部分传递,以便用户可以定义/控制单元格呈现的方式(在同一单元格中使用编辑删除按钮的内容等)。
有没有办法将动态组件作为道具传递,然后渲染此组件?
<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>
其中dataSource数据可以是
[
columns: [{
name: "something",
customComponent: SomeCustomComponent
}, {
name: "another thing",
customComponent: AnotherOtherCustomComponent
}]
]
如果上述问题不清楚,将很乐意详细说明/澄清。
答案 0 :(得分:6)
正如上面的评论所示,您可以在模板中使用动态组件,并在您的属性中传递组件的定义。
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
}]
}
})
&#13;
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<parent-comp :columns="columns"></parent-comp>
</div>
&#13;