主组件内的多个 Vue 组件

Question

在主“包装器”组件中动态插入任意数量的子组件的正确方法是什么？

类似这样的：

主父组件：

<template>
  <div id="app">
    <GridContainer v-for="item in items">
        <GridItem />
    </GridContainer>
  </div>
</template>

<script>
import { GridContainer, GridItem } from 'Grid';

export default {
  name: 'app',
  components: {
    GridContainer,
    GridItem
  },
  data() {
    return {
        items: [...array if items that are dynamic]
    };
  };
}
</script>

Answer 1

在组件上做v-for，而不是包装。像这样

您的 IDE 也可能会警告您缺少密钥，添加密钥的最简单方法是使用索引（但它带有一些警告）。此外，您可能希望将项目传递到组件中。如果你有一个名为item 的道具，你会用:item="item" 传递它

<template>
  <div id="app">
    <GridContainer>
        <GridItem  v-for="(item, k) in items" :key="k" :item="item"/>
    </GridContainer>
  </div>
</template>

<script>
import { GridContainer, GridItem } from 'Grid';

export default {
  name: 'app',
  components: {
    GridContainer,
    GridItem
  },
  data() {
    return {
        items: [...array if items that are dynamic]
    };
  };
}
</script>