Latihan 2: Slots — Vue

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

Starter-nya punya <div class="panel"> di template, pembungkus yang tetap, dan child PanelIsi yang masih kosong. Isi panelnya lewat dua slot:

Di PanelIsi, buat template dengan dua bagian: <div class="panel-header"><slot name="header"></slot></div> dan <div class="panel-body"><slot></slot></div>.
Di dalam <div class="panel">, ganti komentar TODO dengan <component :is="PanelIsi">. Di dalamnya tulis <template #header>Profil</template>, lalu teks Data pengguna, dan tutup dengan </component>.

Teks Data pengguna gak dibungkus <template #...>, jadi dia masuk slot tanpa nama.

Yang dicek:

.panel-header berisi persis Profil, dan .panel-body persis Data pengguna.
Template PanelIsi punya <slot name="header">, dan parent mengisinya dengan <template #header> (atau v-slot:header).
Kedua <div> bagian itu ditulis di template PanelIsi, bukan di template parent.

Hint

Slot bernama dipakai saat child punya lebih dari satu tempat untuk isi. Parent memilih tempatnya dengan <template #nama>.
Template PanelIsi: panel-header berisi <slot name="header">, panel-body berisi <slot> tanpa nama. Di parent, Profil masuk <template #header>, dan Data pengguna ditulis biasa.
template: `<div class="panel-header"><slot name="header"></slot></div><div class="panel-body"><slot></slot></div>` lalu <component :is="PanelIsi"><template #header>Profil</template>Data pengguna</component>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…