# Fragments
new
# Gambaran Umum
Pada Vue versi 3, komponen memiliki dukungan resmi terhadap komponen multi-root node, atau dikenal sebagai fragments
# Sintaks Vue versi 2.x
Pada Vue versi 2.x, komponen multi-root tidak didukung dan akan mengeluarkan sebuah peringatan ketika pengguna secara tidak sengaja membuat komponen tersebut. Untuk mengatasi masalah tersebut, banyak komponen yang dibungkus pada sebuah <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
# Sintaks Vue versi 3.x
Pada Vue versi 3.x, komponen dapat memiliki banyak root node. Namun, hal tersebut menuntut pengembang untuk menyatakan secara eksplisit di mana atribut harus didistribusikan.
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
1
2
3
4
5
6
2
3
4
5
6
Untuk informasi lebih lanjut mengenai cara kerja pewarisan atribut, silahkan Anda membaca Atribut Bukan Properti.