Fragment Nedir?

Vue.js'de fragment, bir bileşenin şablonunda birden fazla kök öğe bulunabilmesi anlamına gelir. Bu özellik Vue 3 ile gelmiştir. Vue 2'de her bileşenin şablonunda tek bir kök öğe olması zorunluydu; birden fazla öğe döndürmek için hepsini gereksiz bir <div> ile sarmak gerekiyordu.

Vue 3'te şablonun kök seviyesine birden fazla öğe yazabilirsiniz; Vue bunları DOM'a ek bir sarmalayıcı koymadan yerleştirir. Bu, özellikle tablo satırları, liste öğeleri ya da flex ve grid düzenlerinde gereksiz sarmalayıcıların yapıyı bozmasını önler.

İşte basit bir örnek:

<template>
  <!-- Vue 3: üç kök öğe, sarmalayıcı div yok -->
  <h1>Başlık</h1>
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
</template>

Yukarıdaki örnekte bileşen <h1> ve iki <p> öğesini doğrudan döndürür.

Dikkat: öznitelik aktarımı

Tek kökü olan bir bileşene verilen class, id gibi öznitelikler otomatik olarak kök öğeye eklenir. Birden fazla kök olduğunda Vue hangi öğeye ekleyeceğini bilemez ve bir uyarı verir. Bu durumda öznitelikleri istediğiniz öğeye v-bind="$attrs" ile açıkça aktarmanız gerekir:

<template>
  <header>Üst bölüm</header>
  <main v-bind="$attrs">İçerik</main>
  <footer>Alt bölüm</footer>
</template>