# $listeners telah dihapus
breaking

# Gambaran Umum

Objek $listeners telah dihapuskan pada Vue 3. Event listeners sekarang bagian dari $attrs:

{
  text: 'this is an attribute',
  onClose: () => console.log('close Event triggered')
}
1
2
3
4

# 2.x Sintaksis

Pada Vue 2, Anda dapat mengakses atribut-atribut yang disuguhkan ke komponen-komponen Anda melalui this.$attrs, dan event listeners dengan this.$listeners. Pengkombinasian dengan inheritAttrs: false, mereka membolehkan para pengembang untuk mengaplikasikan atribut-atribut dan listener-listener ini ke semua elemen lain daripada ke elemen root:

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>
1
2
3
4
5
6
7
8
9
10

# 3.x Sintaksis

Pada Vue 3's virtual DOM, event listeners sekarang hanyalah sebuah atribut, diawali dengan on, dan merupakan bagian dari objek $attrs, sehingga $listeners telah dihapuskan.

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>
1
2
3
4
5
6
7
8
9
10

jika komponen ini mendapatkan sebuah atribut id dan sebuah listener v-on:close, objek $attrs sekarang akan tampak seperti ini:

{
  id: 'my-input',
  onClose: () => console.log('close Event triggered')
}
1
2
3
4

# Strategi Migrasi

Hapus semua penggunaan dari $listeners.

Flag build Migrasi: INSTANCE_LISTENERS

# Baca juga

Deployed on Netlify.
Pembaruan terakhir: 2021-09-02, 11:07:40 UTC