The following warning is reported in component communication (child to parent) in Vue3.
[Vue warn]: Extraneous non-emits event listeners (changeParentProps) 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.
Solution: Just declare the custom event name
emits: [‘changeParentProps’]
<template>
<div>
Subcomponents
</div>
<button @click="changeParentProps"> Changes the parent component's passed props</button>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
emits: ['changeParentProps'],
props: {
data: {
type: String,
default: ''
}
},
setup (props, { emit }) {
// console.log(props)
const changeParentProps = () => {
emit('changeParentProps', '123')
}
return {
changeParentProps
}
}
})
</script>