# 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>
1
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>
1
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>
1
2
3
4
5
6
7
8

Ketika sebuah komponen induk mendengar event click pada komponen:

<tombol-ku v-on:click="tanganiKlik"></tombol-ku>
1

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:

  1. Mendeklarasikan event click dengan jelas. Pilihan ini akan membantu jika Anda menambahkan beberapa logika pada responden event di <tombol-ku>.
  2. 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

Deployed on Netlify.
Pembaruan terakhir: 2020-11-22, 11:48:43 UTC