# Fragments
new

# 概要

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

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