Как использовать компонент VueJS в качестве контейнера элементов CSS-сетки?

Question

В моем родительском компоненте у меня есть контейнер сетки и дочерний компонент:

<template>
  <div>
    <div class="container">
      <grid-items></grid-items>
      <grid-items></grid-items>
      <grid-items></grid-items>
    </div>
  </div>
</template>

Дочерний компонент содержит элементы сетки :

<template>
  <div>
    <div class="item">FOO</div>
    <div class="item">BAR</div>
  </div>
</template>

Это не работает, потому что я должен окружить grid-items дополнительным корнем div в дочернем компоненте, нарушая логику сетки. Если удалить это окружение div в дочернем компоненте, я получу следующее сообщение об ошибке компиляции:

Шаблон компонента должен содержать ровно один корневой элемент. Если вы используете v-if для нескольких элементов, используйте вместо них v-else-if.

Как я могу исправить эту проблему с логикой CSS-сетки?

Answer 1

Я решил это с помощью vue-фрагментов плагина благодаря этой замечательной статье. Вот как я это использовал.

1. Установите плагин

npm i -s vue-fragment

2. Загрузите его глобально в app.js

import Fragment from 'vue-fragment';
Vue.use(Fragment.Plugin);

3. Создать родительский компонент grid-container.vue

<template>
  <div class="container">
    <grid-items></grid-items>
    <grid-items></grid-items>
  </div>
</template>

4. Создать дочерний компонент grid-items.vue

<template>
  <fragment>
    <div>FOO</div>
    <div>BAR</div>
  </fragment>
</template>

Answer 2

Вы не можете, я бы сделал это так:

<template>
 <div>
   <grid-items></grid-items>
 </div>

И поместите контейнер вместо этого в ваш дочерний компонент:

<template>
  <div class="container">
    <div class="item">FOO</div>
    <div class="item">BAR</div>
  </div>
</template>

В противном случае вы будетенужно сделать для каждого элемента сетки 1 компонент