Slot Bernama dan Slot Bawaan
Beberapa , , sintaks singkat #name.
Slot Bernama dan Slot Bawaan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Itu Slot
Slot memungkinkan komponen induk meneruskan markup ke komponen anak. Komponen anak menentukan di mana konten tersebut muncul menggunakan elemen <slot>. Inilah distribusi konten Vue.
Slot Default
<slot> tanpa nama adalah slot default. Apa pun yang ditempatkan induk di antara tag komponen akan muncul di sana.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Menggunakan Slot Default
Komponen induk cukup menyarangkan konten di dalam tag komponen.
<Card>
<p>This goes into the default slot</p>
</Card>Mengapa Menggunakan Slot Bernama
Banyak komponen memiliki beberapa titik penyisipan—header, isi, dan footer. Slot bernama memberikan pengenal kepada setiap wilayah, sehingga induk dapat menargetkannya secara terpisah.
Mendeklarasikan Slot Bernama
Tambahkan atribut name ke setiap slot. Sebuah komponen dapat memadukan slot bernama dan satu slot default (tanpa nama).
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Mengisi Slot Bernama dengan v-slot
Di komponen induk, bungkus konten dalam <template> dengan direktif v-slot:name untuk menargetkan slot bernama.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>Singkatan #
v-slot: memiliki singkatan, yaitu #. Jadi, v-slot:header menjadi #header. Inilah bentuk yang idiomatis dan ringkas.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Konten Default di Antara Tag
Konten yang ditempatkan langsung di antara tag komponen, bukan di dalam templat bernama, akan masuk ke slot default. Anda juga dapat menargetkannya secara eksplisit dengan #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Memadukan Implisit dan Eksplisit
Anda dapat menulis konten default secara langsung dan slot bernama melalui templat dalam penggunaan yang sama. Vue mengarahkan setiap bagian ke tempat yang tepat berdasarkan namanya.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Urutan Render
Urutan slot di komponen induk tidak penting—templat komponen anak mengendalikan tata letak akhir. Konten slot selalu muncul di tempat komponen anak menempatkan <slot> yang sesuai.
Komponen Tata Letak Praktis
Slot bernama memudahkan pembuatan kerangka tata letak yang dapat digunakan kembali. Satu <BaseLayout> dapat menampung halaman apa pun dengan menerima slot untuk header, bilah sisi, dan konten utama.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Pemeriksaan Singkat
Apa singkatan untuk v-slot:header?
Ringkasan
Anda telah mempelajari bahwa slot mendistribusikan markup komponen induk ke komponen anak. <slot> tanpa nama adalah slot default; menambahkan name akan membuat slot bernama. Komponen induk mengisinya dengan <template v-slot:name> atau singkatan #name, sedangkan templat komponen anak menentukan penempatan akhirnya.
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 “Slot Bernama dan Slot Bawaan” gratis?
Ya — teks lengkap “Slot Bernama dan Slot Bawaan” 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 “Slot Bernama dan Slot Bawaan”?
Beberapa , , sintaks singkat #name. 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 1 dari 4.
Berapa lama pelajaran “Slot Bernama dan Slot Bawaan” 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