Как добавить несколько компонентов внутри компонета Vue?

Question

[Арсений Соколов]

Есть компоненет, допустим назвается Home.vue, в нем такой код:

<template>
    <banner></banner>
    <services></services>
</template>

Если использовать только один компонент внутри данного компонента, тогда все все работает, как только попытаться использовать больше одного компонента проект не собирается и вываливает ошибку:

(Emitted value instead of an instance of Error)
  Error compiling template:

  <banner></banner>
  <services></services>

  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

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

Answer 1

[Станислав Почепко]

Оберните всё в div

<template>
<div>
    <banner></banner>
    <services></services>
</div>
</template>

Внутри template тега должен быть только один кореновой элемент

Comments

[Арсений Соколов]

Как все элементарно, я то голову сломал, почему только один корневой, даже в голову не приходило так сделать

Answer 2

[Антон Антон]

Component template should contain exactly one root element

Например

<div>
  <banner></banner>
  <services></services>
</div>

Answer 3

[Александр Аксентьев]

should contain exactly one root element

что непонятного-то?

Comments

[Арсений Соколов]

Вот я и не мог додумать что надо все просто обернуть в один корневой тег.