Konten Cadangan Slot dan Pemeriksaan Slot
Konten slot bawaan, useSlots() untuk memeriksa apakah slot diberikan, rendering bersyarat.
Konten Cadangan Slot dan Pemeriksaan Slot adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 4 pelajaran total.
Konten Cadangan Slot
Sebuah <slot> dapat berisi markup bawaan. Jika komponen induk menyediakan konten untuk slot tersebut, konten dari komponen induk yang digunakan; jika tidak, konten cadangan di dalam slot akan ditampilkan.
Mendefinisikan Konten Cadangan
Letakkan konten bawaan di antara tag slot. Ini menjadi nilai bawaan yang sesuai ketika slot bersifat opsional.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Contoh Konten Cadangan
Jika komponen induk tidak mengirimkan apa pun, "Submit" akan ditampilkan. Jika komponen induk mengirimkan konten, konten tersebut menggantikan konten cadangan.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Konten Cadangan Slot Bernama
Slot bernama juga mendukung konten cadangan. Slot header dapat menampilkan judul standar secara bawaan ketika komponen induk tidak menyediakannya.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Masalah Pembungkus Kosong
Terkadang Anda hanya ingin menampilkan elemen pembungkus (seperti wadah footer) ketika komponen induk benar-benar menyediakan konten slot. Untuk itu, Anda harus memeriksa apakah sebuah slot tersedia.
Komposabel useSlots
Di dalam <script setup>, useSlots() mengembalikan objek yang kuncinya merupakan nama-nama slot yang disediakan. Setiap nilainya adalah fungsi yang mengembalikan vnode slot.
import { useSlots } from "vue";
const slots = useSlots();Memeriksa Apakah Slot Dikirimkan
Panggil fungsi slot dan periksa apakah kontennya bernilai benar. slots.header hanya ada jika komponen induk menyediakan slot tersebut; pemanggilan slots.header?.() mengembalikan vnode-nya dengan aman.
const hasHeader = computed(() => !!slots.header);Menampilkan Pembungkus Secara Kondisional
Gunakan pemeriksaan tersebut bersama v-if agar elemen pembungkus hanya muncul ketika terdapat konten, sehingga node DOM kosong dapat dihindari.
<header v-if="slots.header">
<slot name="header" />
</header>Alasan Menggunakan Rantai Opsional
slots.header?.() mencegah masalah ketika slot bernilai undefined. Tanpa rantai opsional, pemanggilan slot yang tidak terdefinisi akan menimbulkan kesalahan. Pola ini umum digunakan dalam fungsi render dan pemeriksaan computed.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots dalam Templat
Templat menyediakan data yang sama melalui $slots. Anda dapat langsung memeriksa $slots.footer di dalam v-if tanpa mengimpor useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Menggabungkan Semuanya
Komponen kartu yang andal hanya menampilkan setiap bagian ketika slotnya disediakan, sehingga markup tetap rapi dan gaya tetap konsisten.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Pemeriksaan Singkat
Bagaimana cara memeriksa apakah komponen induk menyediakan slot "header" dalam script setup?
Ringkasan
Anda telah mempelajari bahwa slot dapat berisi konten cadangan yang ditampilkan ketika komponen induk tidak menyediakan slot tersebut. Untuk menampilkan pembungkus secara kondisional, periksa keberadaan slot menggunakan useSlots() (slots.header?.()) di script setup atau $slots.header di dalam templat.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Konten Cadangan Slot dan Pemeriksaan Slot” gratis?
Ya — teks lengkap “Konten Cadangan Slot dan Pemeriksaan Slot” 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 4 pelajaran total.
Apa yang akan aku pelajari di “Konten Cadangan Slot dan Pemeriksaan Slot”?
Konten slot bawaan, useSlots() untuk memeriksa apakah slot diberikan, rendering bersyarat. 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 4 dari 4.
Berapa lama pelajaran “Konten Cadangan Slot dan Pemeriksaan Slot” 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
- Slot Bernama dan Slot Bawaan
- Slot Berscope: Mengirim Data ke Induk
- Nama Slot Dinamis
- Konten Cadangan Slot dan Pemeriksaan Slot