Slots — CompileDaily Study

Penjelasan

Slot adalah cara Vue membuat komponen "pembungkus" generik yang isinya fleksibel — setara props.children di React. Default slot (<slot></slot>) menampung konten yang dituliskan langsung di antara tag komponen, sedangkan named slot (<slot name="...">) memungkinkan beberapa "lubang konten" berbeda dalam satu komponen.

Contoh Konsep

<!-- Kartu.vue -->
<template>
    <div class="kartu-pembungkus">
        <header><slot name="judul"></slot></header>
        <main><slot></slot></main> <!-- default slot -->
    </div>
</template>

<!-- App.vue -->
<template>
    <Kartu>
        <template #judul>
            <h2>Judul Kartu</h2>
        </template>
        <p>Ini konten default slot.</p>
    </Kartu>
</template>

Praktikum

Buat komponen Panel.vue dengan named slot 'judul' dan default slot untuk isinya. Pakai komponen Panel itu dua kali di App.vue dengan judul dan isi berbeda-beda lewat template #judul dan konten default.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Named slot dipakai lewat <template #namaSlot> (singkatan dari v-slot:namaSlot) di sisi pemakai komponen — sedangkan default slot cukup ditulis langsung sebagai konten biasa TANPA perlu <template> pembungkus tambahan.