Несколько компонентов Vue внутри основного компонента - PullRequest
Новая
       3

Несколько компонентов Vue внутри основного компонента

0 голосов
/ 14 июня 2019

Как правильно динамически вставить любое количество подкомпонентов внутри основного компонента-оболочки?

Примерно так:

Основной родительский компонент: 

<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>

1 Ответ

1 голос
/ 14 июня 2019

do 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>
...