[FIXED] How to replace this.$parent.$emit in Vue 3?

Issue

I have migrated my application to Vue 3.

Now my linter shows a deprecation error, documented here: https://eslint.vuejs.org/rules/no-deprecated-events-api.html.

The documentation shows how to replace this.$emit with the mitt library, but it doesn't show how to replace this.$parent.$emit.

Solution

In your child component:

setup(props, { emit }) {
   ...
   emit('yourEvent', yourDataIfYouHaveAny);
}

Your parent component:

<your-child @yourEvent="onYourEvent" />

...

onYourEvent(yourDataIfYouHaveAny) {
  ...
}

Answered By - Developer

Answer Checked By - Timothy Miller (PHPFixing Admin)