# $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')
}
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>
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>
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')
}
2
3
4
# Strategi Migrasi
Hapus semua penggunaan dari $listeners
.
Flag build Migrasi: INSTANCE_LISTENERS