# Fragments
new

# 概要

Vue 3 では、コンポーネントがマルチルートノードコンポーネント、つまりフラグメントを公式にサポートするようになりました！

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 では、コンポーネントは複数のルートノードを持つことができるようになりました。しかし、これは開発者が属性をどこに割り当てるかを明示的に定義する必要があります。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

1
2
3
4
5
6

属性の継承の仕組みについては、プロパティでない属性を参照してください。