Vue 在组件上使用 v-for

在自定义组件上,你可以像在任何普通元素上一样使用 v-for

<my-component v-for="item in items" :key="item.id"></my-component>
2.2.0+ 的版本里,当在组件上使用 v-for 时,key 现在是必须的。

然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 prop:

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

分类Vue列表渲染相关推荐:

Vue 列表用 v-for 把一个数组对应为一组元素 Vue列表维护状态v-bind:key Vue列表数组的方法 Vue列表数组的替换方法 Vue列表显示过滤/排序后的结果 Vue 在 v-for 里使用值范围 Vue 在 <template> 上使用 v-for Vue中v-for 与 v-if 一同使用 Vue 在组件上使用 v-for