# Opsi emits
new
# Gambarang Umum
Vue versi 3 menawarkan opsi emits
, yang mirip dengan opsi props
yang sudah ada. Opsi ini dapat digunakan untuk mendefinisikan kejadian yang dapat diteruskan pada komponen induk.
# Perilaku Vue versi 2.x
Pada Vue versi 2, Anda dapat mendefinisikan properti-properti yang dapat diterima oleh sebuah komponen, namun Anda tidak dapat menentukan kejadian apa saja yang dapat diteruskan:
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text']
}
</script>
2
3
4
5
6
7
8
9
10
11
# Perilaku Vue versi 3.x
Mirip dengan properti, kejadian yang dapat diteruskan oleh komponen dapat didefinisikan menggunakan opsi emits
:
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>
2
3
4
5
6
7
8
9
10
11
12
Opsi tersebut juga menerima sebuah objek, yang memperbolehkan pengembang untuk menetapkan pemeriksa untuk argumen yang diberikan pada event yang diteruskan, mirip dengan pemeriksa pada definisi props
.
Untuk informasi lebih lanjut mengenai hal ini, silahkan baca dokumentasi API untuk fitur ini.
# Strategi Migrasi
Sangat disarankan bagi Anda untuk mendokumentasikan seluruh event yang diteruskan oleh setiap komponen yang Anda buat menggunakan emits
.
Hal tersebut menjadi sangat penting karena penghapusan pengubah .native. Setiap listener untuk event yang tidak dideklarasikan menggunakan emits
akan diikutsertakan pada $attrs
milik komponen, yang secara umum akan terikat pada node inti dari komponen.
# Contoh
Untuk komponen-komponen yang meneruskan ulang event bawaan pada komponen induk, perubahan tersebut akan menyebabkan adanya dua event yang terjadi sekaligus:
<template>
<button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
emits: [] // tanpa deklarasi event
}
</script>
2
3
4
5
6
7
8
Ketika sebuah komponen induk mendengar event click
pada komponen:
<tombol-ku v-on:click="tanganiKlik"></tombol-ku>
Event tersebut akan terjadi sebanyak dua kali:
- Sekali dari
$emit()
- Sekali dari event listener bawaan yang ada pada elemen inti.
Disini Anda memiliki dua pilihan:
- Mendeklarasikan event
click
dengan jelas. Pilihan ini akan membantu jika Anda menambahkan beberapa logika pada responden event di<tombol-ku>
. - Hapus penerusan ulang event, karena sekarang elemen induk dapat mendengarkan event bawaan dengan mudah, tanpa menambahkan
.native
. Cocok digunakan bila Anda hanya akan meneruskan ulang event tersebut.
# Lihat Juga
← Opsi Data API Events →