javascript - Vue 中单个 "list"组件与重复的单个组件

Question

我正在学习 Vue，并正在学习一门类(class)，该类(class)反复展示了获取一些示例数据的示例，然后创建一个使用 v-for 指令来迭代数据并创建标记的单个组件对于每个数据项。

这让我有点奇怪，因为我的本能是创建一个代表单个数据项的组件，然后为每个项目创建一个实例。每个实例都能够对自己的数据突变使用react，发出自己的事件等。话虽如此，在单个“ItemList”组件中执行此操作并动态传递值似乎并不困难，但它只是由于某种原因没有坐在我身边。

我的问题是:是否有可能创建一个父组件来迭代某些数据并实例化代表单个数据项的另一个组件的多个实例？

到目前为止，我的经验是导入任何给定的组件，并且您可以访问该组件，因此我什至不确定是否可以拥有给定组件的多个实例。考虑到我之前问题的答案，这样做是最佳实践还是仅使用单个组件循环所有数据？

Answer 1

您可以使用 <component></component> 来执行此操作Vue 为您提供的助手。

<component v-for="(row, index) in rows" :key="`rows-${index}`"
           :is="RowRenderer"
           :row="row"></component>

您可以将其写入父组件的模板中，其中父组件包含 RowRenderer组件:

components: {
  RowRenderer
}