# Добавлены фрагменты
новое
# Обзор
Во Vue 3 компоненты теперь имеют официальную поддержку компонентов с несколькими корневыми элементами, т.е. фрагментов!
# Синтаксис в 2.x
В версии 2.x компоненты с несколькими корневыми элементами не поддерживались и показывалось предупреждение в консоли, когда случайно создавался такой. В результате, многие компоненты содержат обёртку в виде одного <div>
для исправления этой ошибки.
<!-- Layout.vue -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Синтаксис в 3.x
В 3.x компоненты теперь могут иметь несколько корневых элементов! Однако, это требует от разработчиков явного определения, каким образом должны применяться атрибуты.
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
1
2
3
4
5
6
2
3
4
5
6
Подробнее как работает наследование атрибутов в разделе Передача обычных атрибутов.