If you are migrating from Vuejs2 to Vuejs3, then there will be many new challenges you will face, and “Extraneous non-emits event listeners warning” is one of them I faced in Optional API.
What would cause this warning?
Let’s suppose you have a parent & child component as follows.
Child Component:
<script>
export default {
name: 'Child',
props: {
items: {
type: Array,
defauly: null,
},
},
}
</script>
<template>
<button @click="this.$emit('reloadAll')">Refresh</button>
<div v-for="(item, i) in items" :key="i">
{{ item }}
</div>
</template>
Parent Component:
<script>
import Child from './Child.vue'
export default {
name: 'Parent',
data() {
return {
items: [
// list of items
],
}
},
methods: {
reloadAll() {
// code to reload data
},
},
}
</script>
<template>
<Table :items="items" @reloadAll="reloadAll" />
</template>
In order to avoid the “Extraneous non-emits event listeners” warning in the browser console, that would be quite irritating. To fix this you only need to define the emits in your child component as defined in the vuejs official doc: https://vuejs.org/guide/components/events.html#declaring-emitted-events
Child component with Declaring Emitted Events
<script>
export default {
name: 'Child',
emits: ['reloadAll'],
props: {
items: {
type: Array,
defauly: null,
},
},
}
</script>
<template>
<button @click="this.$emit('reloadAll')">Refresh</button>
<div v-for="(item, i) in items" :key="i">
{{ item }}
</div>
</template>
Emitted events can be explicitly declared on the component via the emits option: and this will resolve the warning issue with emitting to the parent component in vuejs3
export default {
emits: ['reloadAll']
}
