How do I use $emit in Vue.js with TypeScript?

How do I use $emit in Vue.js with TypeScript?

In Vue.js, you can use $emit to trigger events from a child component to its parent. In TypeScript, you can define the event types for better type safety.

Can you show me an example of how to define the event types?

Sure! You can define an interface for your event payload and use it in your component. For example:

interface MyEventPayload {
  message: string;
}

this.$emit<'myEvent', MyEventPayload>('myEvent', { message: 'Hello, parent!' });

What if I want to listen to this event in the parent component?

In the parent component, you can listen to the event like this:

<ChildComponent @myEvent="handleMyEvent" />

And then define the handleMyEvent method to handle the payload.

Thanks! Is there a way to type the event listener in the parent component?

Yes! You can use TypeScript to type the event listener as well. You can define the event payload type in the parent component and use it in the method signature.