Sarmal Component nedir, nerede kullanılır? (VueJS ile örneklendirildi)

Projenizdeki bir bölümü, birçok sayfada kullanmanız gerekiyor ama bazı sayfalarda içeriğinin yeniden şekillendirilmesi gerekiyorsa slot element yardıma yetişiyor.

Hadi başlayalım

Bu senaryoya uygun bir örnek olarak Layout’u değerlendirebiliriz. Layout adında bir componentimiz olsun ve projemizdeki (Login hariç) tüm sayfalarımızı sarmalasın.

Layout’umuz dört farklı bölümden oluşsun. Header, Aside, Main, Footer. Böyle bir Layout’da Main’in içeriğinin her sayfada değişmesini ama diğer bölümlerin sabit kalmasını bekleriz.

Bunun için Main içerisine <slot/> yerleştirmemiz gerekir.

Layout.vue
<template>
  <header><h2>Header</h2></header>
  <aside><h2>Aside</h2></aside>
  <main><slot/></main>
  <footer><h2>Footer</h2></footer>
</template>

Layout componentimiz hazır. Şimdi Home sayfamızı Layout ile sarmalayalım.

Home.vue
<script setup>
import Layout from '../components/Layout.vue'
</script>
<template>
  <layout>
    <h1>Home</h1>
    <p>This is a Home Page</p>
  </layout>
</template>

Böyle bir sonuç aldığımızda artık projemizde kendini tekrar eden kod sayısı ciddi miktarda azalacak. Header, Aside veya Footer tarafında bir değişiklik yapmanız gerektiğinde doğrudan Layout Componentine müdahale etmeniz yeterli.

Aynı şekilde bir sayfada temel Layout bölümlerinin olmasını istemiyorsak, o sayfayı Layout Componentiyle sarmalamayı iptal etmemiz yeterli.

Hepsi bu kadar

Sarmal Component yapısını sadece Layout senaryosunda değil, birçok senaryoda gönül rahatlığıyla kullanabiliriz.

Örneğin kendi Select (Dropdown) Componentinizi yapmanız gerekti, Options’ları emit + prop ile yönetmek istemiyorsunuz, bu durumda Select’i kullandığınız dosya içerisinde Options’ları yönetebilirsiniz.