Могу ли я по-разному выбирать, какой компонент 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

вы ищете динамические компоненты

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

Answer 2

Вы можете создать динамический компонент, используя свойство is в html. Свойство is потребует передачи строки (имени компонента) и преобразует ее в реальный компонент.

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

Вы должны связать оба свойства data и is, используя префикс :, поскольку переменные должны передаваться компоненту как переменные из объекта item. Если вы не используете их, они будут переданы в виде строк (например, 'item.component'), что неправильно.