PricingLoginStart free
Vue Academy · Pelajaran

Nama Slot Dinamis

v-slot:[dynamicName], pemilihan slot secara terprogram, rendering slot bersyarat.

Pelajaran 3 dari 413 langkah

Nama Slot Dinamis adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa Menggunakan Nama Slot Dinamis

Terkadang slot yang ingin Anda isi belum diketahui hingga waktu berjalan—slot tersebut bergantung pada prop, state, atau variabel perulangan. Vue memungkinkan Anda menghitung nama slot dengan sintaks tanda kurung siku.

Sintaks Argumen Dinamis

Bungkus ekspresi dalam tanda kurung siku setelah v-slot:. Vue mengevaluasinya untuk menentukan nama slot target.

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

Singkatan dengan Tanda Kurung Siku

Singkatan # juga mendukung argumen dinamis.

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

Menentukan Nama dari State

Ekspresi dalam tanda kurung dapat membaca nilai reaktif apa pun. Mengubah variabel akan mengubah slot yang diisi oleh konten tersebut.

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

Mengganti Konten yang Dirender

Jika digabungkan dengan komponen anak yang mendefinisikan beberapa slot bernama, nama dinamis memungkinkan satu templat menampilkan wilayah yang berbeda berdasarkan state.

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

Memilih Nama dari Props

Prop komponen dapat menentukan slot. Ini berguna untuk pembungkus yang dapat dikonfigurasi, saat pemanggil memilih wilayahnya.

const props = defineProps({ target: String });
// use props.target inside #[props.target]

Melakukan Iterasi pada Slot Dinamis

Anda dapat merender slot dalam perulangan dengan menghitung setiap nama dari item perulangan—berguna untuk kolom tabel atau sistem tab.

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

Nama yang Valid dan Huruf Kecil

Nama slot dinamis harus menghasilkan string yang valid. Nilai null diperlakukan sebagai slot default. Hindari spasi dan karakter yang tidak valid dalam nama atribut HTML saat menggunakan templat sebaris.

const name = condition ? "primary" : null;
// null -> default slot

Pemilihan Slot Bersyarat

Ekspresi ternary di dalam tanda kurung siku memilih antara beberapa slot berdasarkan suatu kondisi, semuanya dilakukan di dalam templat.

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

Kasus Penggunaan Komponen Tab

Komponen tab dapat merender konten tab yang aktif dengan menghitung nama slot dari id tab yang dipilih, sehingga komponen induk tetap deklaratif.

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

Jaga Agar Tetap Mudah Dibaca

Slot dinamis memang kuat, tetapi dapat mengaburkan maksud kode. Utamakan slot dinamis saat kumpulan slot benar-benar berbasis data; untuk beberapa slot yang tetap, slot bernama biasa lebih mudah dibaca.

Pemeriksaan Singkat

Sintaks mana yang memilih slot dengan nama yang dihitung saat waktu berjalan?

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari bahwa nama slot dinamis menggunakan sintaks kurung siku v-slot:[expr] atau #[expr] untuk menentukan slot yang akan diisi berdasarkan props atau state. Dengan begitu, Anda dapat membuat pembungkus yang dapat dikonfigurasi, sistem tab, dan tampilan kolom berbasis data.

Gratis untuk memulai

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
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Nama Slot Dinamis” gratis?

Ya — teks lengkap “Nama Slot Dinamis” 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 “Nama Slot Dinamis”?

v-slot:[dynamicName], pemilihan slot secara terprogram, rendering slot 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 3 dari 4.

Berapa lama pelajaran “Nama Slot Dinamis” 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

  1. Slot Bernama dan Slot Bawaan
  2. Slot Berscope: Mengirim Data ke Induk
  3. Nama Slot Dinamis
  4. Konten Cadangan Slot dan Pemeriksaan Slot
← Kembali ke Vue Academy