我可以在模板中可变地选择要使用的Vue.js组件吗？

Question

假设我有一个对象列表，如下所示：

[
  {
    "component": "component-a",
    "data": { "x": 42 }
  },
  {
    "component": "component-b",
    "data": { "state": "New York" }
  }
]

我循环遍历该列表，如下所示：

<div v-for="item in items">
  // ...
</div>

我想在每次迭代中选择基于item.component使用的组件。有没有办法让Vue.js呈现以下内容？

<div>
  <component-a data="{x:'a'}"></component-a>
</div>
<div>
  <component-b data="{state:'New York'}"></component-b>
</div>

Answer 1

您正在寻找dynamic components

<div v-for="item in items">
  <component v-bind:is="item.component" data="item.data"></component>
</div>

Answer 2

您可以使用html中的is属性创建动态组件。 is属性将要求您传递一个字符串（组件名称），并将其转换为实际组件。

<div v-for="item in items">
    <div v:is="item.component" :data="item.data"></div>
</div>

您应该使用data前缀绑定is和:属性，因为变量必须作为变量从item对象传递给组件。如果你不使用它们，它们将作为字符串（例如'item.component'）传递，这是错误的。