vue.js - vue2 列表返回混合字符串或组件

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>