Latihan 1: Emits — Vue

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

Starter-nya sudah punya count mulai 0, fungsi increment, <span id="count">, dan child TombolTambah dengan template <button id="inc">+1</button>. Child-nya mengirim kabar, parent yang menambah angkanya:

Di TombolTambah, tambahkan opsi emits: ["tambah"].
Di template-nya, tulis @click="$emit('tambah')" di <button>.
Di bawah #count, ganti komentar TODO dengan <component :is="TombolTambah" @tambah="increment" />.

Yang dicek:

Sebelum diklik, #count berisi 0.
Sekali klik #inc, #count berisi 1; dua kali klik, 2.
TombolTambah menyatakan emits: ["tambah"] dan memanggil $emit('tambah').
Parent mendengarkan dengan @tambah= (atau v-on:tambah=).

Hint

Child gak mengubah count sendiri. Ia cuma mengirim event tambah, dan parent yang menjalankan increment saat mendengarnya.
Nyatakan event-nya lewat opsi emits di objek TombolTambah, kirim dengan $emit('tambah') di @click tombolnya, lalu dengarkan dengan @tambah="increment" di <component>.
emits: ["tambah"], template: `<button id="inc" @click="$emit('tambah')">+1</button>` lalu <component :is="TombolTambah" @tambah="increment" />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Emits — Vue

Hint

Memperbarui Aplikasi