Vue.js

# Добавлены фрагменты
новое

# Обзор

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

# Синтаксис в 3.x

В 3.x компоненты теперь могут иметь несколько корневых элементов! Однако, это требует от разработчиков явного определения, каким образом должны применяться атрибуты.

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>
1
2
3
4
5
6

Подробнее как работает наследование атрибутов в разделе Передача обычных атрибутов.

← Изменения функциональных компонентов →