ve2 list返回混合字符串或组件

Question

在这样的循环中，我主要只是迭代项目值作为字符串，但有时需要返回渲染组件，例如构建链接元素，或下拉菜单，为表格单元格-需要找到一种方法来返回其他组件输出，而不是原始的html字符串

<tr class="listing-item listing-item-category">
<td v-for="td in headeritems">{{val(td.k)}}</td>
</tr>

这可能吗?我发现没有提到这一点，方法代码应该如何返回其他组件输出?我知道我将不得不使用v-html，但如何得到它?

Answer 1

假设我们有这样一个列表:

headerItems: [
{
type: 'text',
value: 'Some text'
},
{
type: 'img',
props: {
src: 'http://some-where....'
}
},
{
type: 'my-component',
value: 'v-model value',
props: {
prop1: 10,
prop2: 'Blah bla',
},
events: {
myEvt: () => console.log('myEvt has fired')
}
},
],

那么，我们可以渲染它:

<tr>
<td
v-for="(item, i) in headerItems" :key="i"
>
<div v-if="item.type === 'text'"> {{ item.value }}</div>
<component
v-else
:is="item.type"
v-model="item.value"
v-bind="item.props"
v-on="item.events"
/>
</td>
</tr>