Multiple Dom nodes in template use emits will warn Extraneous non-emits event listeners (eventName) were passed to component but could not be automatically inherited
PolanZ opened this issue · comments
Vue version
latest
Link to minimal reproduction
Steps to reproduce
Only the component use multipart dom nodes and use emiti, will warning non-emits. the code you can get.
App.vue
<script setup>
import { ref } from 'vue';
import CompVue from './Comp.vue';
const msg = ref('Hello World!')
const handleClose = () => {};
</script>
<template>
<h1>{{ msg }}</h1>
<CompVue @close="handleClose"/>
</template>Comp.vue
<script setup>
// if dynamic component how to add the defined ?
const emit = defineEmits(["close"])
const handleClick = () => {
emit("close");
}
</script>
<template>
<div>
123
<slot />
</div>
<!-- many dom root will warn non-emits -->
<div @click="handleClick">click me!</div>
</template>the console will warning tips:
[Vue warn]: Extraneous non-emits event listeners (close) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
What is expected?
not warning
What is actually happening?
warn
[Vue warn]: Extraneous non-emits event listeners (close) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
at <Comp onClose=fn<handleClose> >
at <Repl>
System Info
No response
Any additional comments?
No response
// if dynamic component how to add the defined emits ?