How do I use emit in Vue 3 with TypeScript?

How do I use emit in Vue 3 with TypeScript?

In Vue 3, you can use the emit function to send events from a child component to a parent component. With TypeScript, you can define the types of the emitted events for better type safety.

Can you show me an example of how to define the emitted events?

Sure! In your child component, you can define the emitted events in the emits option like this:

import { defineComponent } from 'vue';

export default defineComponent({
  emits: { 
    myEvent: (payload: string) => true 
  },
  methods: {
    triggerEvent() {
      this.$emit('myEvent', 'Hello from child!');
    }
  }
});

What about the parent component? How do I listen to that event?

In the parent component, you can listen to the emitted event using the v-on directive or the @ shorthand:

<ChildComponent @myEvent="handleMyEvent" />

And then define the handleMyEvent method in your parent component to handle the event.

Is there a way to type the event handler in the parent component?

Yes! You can type the event handler in the parent component by defining the method with the expected payload type:

methods: {
  handleMyEvent(payload: string) {
    console.log(payload);
  }
}