我可以选择在模板中使用哪种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'）传递。