API Events

breaking

Gambaran Umum

Method $on, $off dan $once dihapus. Objek aplikasi tidak perlu lagi untuk mengimplementasikan antarmuka event emitter.

Sintaks Vue versi 2.x

Pada Vue versi 2.x, objek Vue dapat digunakan untuk memicu event handler yang dipasang secara imperatif melalui API event emitter ($on, $off, dan $once). Hal tersebut dapat digunakan untuk membuat event hub yang dapat membuat event handler global yang dapat digunakan diseluruh bagian pada aplikasi:

// eventHub.js

const eventHub = new Vue()

export default eventHub

// KomponenAnak.vue
import eventHub from './eventHub'

export default {
  mounted() {
    // menambahkan _handler_ eventHub
    eventHub.$on('event-kustom', () => {
      console.log('Event kustom terjadi!')
    })
  },
  beforeDestroy() {
    // menghapus _handler_ kejadianKustom
    eventHub.$off('event-kustom')
  }
}

// KomponenInduk.vue
import eventHub from './eventHub'

export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('event-kustom') // jika KomponenAnak telah masuk ke dalam DOM, Anda dapat mlihat sebuah pesan pada console.
    }
  }
}

Pembaruan Vue versi 3.x

Kami menghapus method $on, $off dan $once dari objek Vue sepenuhnya. $emit tidak dihapus dan tetap merupakan bagian dari API karena $emit digunakan untuk memicu event handler yang dipasang secara deklaratif pada sebuah komponen induk.

Strategi Migrasi

Di Vue 3, tidak memungkinkan lagi menggunakan API ini untuk me-listen event komponen yang dihasilkan oleh dirinya sendiri, tidak ada cara migrasi untuk kasus tersebut.

Tetapi pola eventHub dapat diganti dengan pustaka eksternal yang mengimplementasi antarmuka event emitter, sebagai contoh mitt (opens new window) atau tiny-emitter (opens new window).

Contoh:

//eventHub.js
import emitter from 'tiny-emitter/instance'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args),
}

Cara tersebut menghasilkan API event emitter yang sama seperti pada Vue 2.

Cara tersebut mungkin akan didukung juga pada build kompatibel dari Vue 3.