Latihan 1: Slots — Vue

Latihan 1 dari materi Slots di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya child Kartu yang masih kosong. Buat kartu yang isinya dikirim lewat slot:

const Kartu = {
  template: `<div class="card"><slot></slot></div>`,
}

Di bawah garis ---template---, ganti komentar TODO dengan <component :is="Kartu">, isi dengan <p>Konten kartu</p>, lalu tutup dengan </component>.

Yang dicek:

Hint

<slot> adalah tempat di template child tempat isi dari parent dimasukkan. Parent menulis isinya di antara tag pembuka dan penutup komponennya.
Template Kartu cukup div berkelas card berisi <slot></slot>. Di parent, <p>Konten kartu</p> ditulis di antara <component :is="Kartu"> dan </component>.
const Kartu = { template: `<div class="card"><slot></slot></div>` } lalu <component :is="Kartu"><p>Konten kartu</p></component>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…