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>

主组件内部有多个Vue组件

1 个答案: