Vue Academy · Pelajaran

Slot dan Slot Berscope

Susun komponen fleksibel menggunakan slot dan slot berscope.

Slot dan Slot Berscope adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Apa Itu Slot?

Slot memungkinkan induk menyisipkan konten ke dalam templat komponen anak.

Props meneruskan data; slot meneruskan markup
Sangat berguna untuk pembungkus tata letak, kartu, dan modal
Anak menentukan tempat konten tersebut diletakkan

Slot Bawaan

Anak mendefinisikan tempat penampung dengan elemen slot. Apa pun yang diletakkan induk di antara tag akan mengisinya.

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Menggunakan Slot Bawaan

Induk meneruskan konten di antara tag komponen.

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

Konten Cadangan Slot

Slot dapat menyediakan konten cadangan yang ditampilkan saat induk tidak meneruskan apa pun.

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

Beberapa Slot Bernama

Slot bernama memungkinkan komponen menyediakan beberapa titik penyisipan.

<!-- Layout.vue -->
<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

Mengisi Slot Bernama

Induk menargetkan slot bernama dengan v-slot:name pada tag templat.

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

Singkatan v-slot

v-slot memiliki singkatan berupa simbol #.

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

Slot Terlingkup

Slot terlingkup memungkinkan anak meneruskan data ke konten slot.

Anak mengikat data pada elemen slot
Induk menerimanya sebagai props slot
Berguna saat anak mengendalikan data, tetapi induk mengendalikan tampilannya

Membagikan Data dari Anak

Anak mengikat atribut pada slot untuk membagikan data.

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

Menggunakan Data Slot Terlingkup

Induk menerima data melalui v-slot.

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

Kapan Menggunakan Setiap Slot

Panduan singkat:

Slot bawaan untuk penyisipan konten sederhana
Slot bernama untuk beberapa wilayah (tata letak)
Slot terlingkup saat induk memerlukan data internal anak

Pemeriksaan Singkat

Uji pemahaman Anda tentang slot.

Ringkasan: Slot

Anda telah mempelajari distribusi konten dengan slot:

Slot bawaan menyisipkan markup dari induk
Konten cadangan ditampilkan saat tidak ada yang diteruskan
Slot bernama (v-slot:name, singkatan #) menargetkan wilayah tertentu
Slot terlingkup meneruskan data anak ke konten slot

Berikutnya: dasar-dasar reaktivitas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Slot dan Slot Berscope” gratis?

Ya — teks lengkap “Slot dan Slot Berscope” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Slot dan Slot Berscope”?

Susun komponen fleksibel menggunakan slot dan slot berscope. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Slot dan Slot Berscope” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy