Vue3 Warning: [Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component

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>

Read More: