Slot Berscope: Mengirim Data ke Induk
slot :data='value', v-slot='{ data }' di sisi induk, pola prop render.
Slot Berscope: Mengirim Data ke Induk adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Keterbatasan Slot Biasa
Slot biasa memungkinkan komponen induk meneruskan markup, tetapi komponen induk tidak dapat mengakses data internal komponen anak. Slot berskop mengatasi hal ini dengan memungkinkan komponen anak mengekspos data kembali ke konten slot.
Mengikat Data pada Slot
Komponen anak mengikat atribut pada elemen <slot>-nya, yang disebut slot props. Atribut tersebut diteruskan ke apa pun yang dirender oleh komponen induk.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Menerima Slot Props
Di komponen induk, nilai v-slot menjadi objek yang berisi semua slot props yang diikat oleh komponen anak.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Membongkar Slot Props
Karena nilai slot hanyalah sebuah objek, Anda dapat membongkarnya secara sebaris agar kode lebih rapi.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Singkatan untuk Slot Berskop Default
Saat Anda hanya menggunakan slot default, Anda dapat menempatkan v-slot langsung pada tag komponen, bukan pada templat bersarang.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Mengganti Nama dan Nilai Default
Pembongkaran mendukung penggantian nama dan nilai default, sama seperti JavaScript biasa.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Slot Berskop Bernama
Slot bernama juga dapat memiliki cakupan. Gabungkan nama tersebut dengan props yang dibongkar.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Komponen Tanpa Render
Slot berskop memungkinkan pola komponen tanpa render: komponen menangani logika dan state, tetapi tidak merender markup miliknya sendiri—komponen tersebut hanya mengekspos data melalui slot berskop dan membiarkan komponen induk menentukan antarmukanya.
Pelacak Tetikus Tanpa Render
Komponen ini melacak kursor dan mengekspos koordinat. Komponen tersebut hanya merender slot default-nya, dengan meneruskan x dan y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Menggunakan Komponen Tanpa Render
Komponen induk menyediakan seluruh tampilan dan membaca data yang diekspos, sehingga logika sepenuhnya terpisah dari presentasi.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Slot Berskop vs Komposabel
Komposabel sering menggantikan komponen tanpa render di Vue 3 untuk penggunaan ulang logika murni. Namun, slot berskop tetap lebih unggul saat komponen anak harus mengendalikan iterasi atau struktur, seperti daftar atau tabel, sementara komponen induk menyesuaikan setiap item.
Pemeriksaan Singkat
Bagaimana komponen induk menerima data yang diekspos oleh slot berskop?
Ringkasan
Anda telah mempelajari bahwa slot berskop memungkinkan komponen anak mengekspos data ke atas dengan mengikat props pada <slot>-nya. Komponen induk membacanya melalui nilai v-slot, yang sering kali dibongkar, sehingga memungkinkan komponen tanpa render yang memisahkan logika dari presentasi.
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 Berscope: Mengirim Data ke Induk” gratis?
Ya — teks lengkap “Slot Berscope: Mengirim Data ke Induk” 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 Berscope: Mengirim Data ke Induk”?
slot :data='value', v-slot='{ data }' di sisi induk, pola prop render. 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 2 dari 4.
Berapa lama pelajaran “Slot Berscope: Mengirim Data ke Induk” 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