DEV Community

cn-2k
cn-2k

Posted on

9 2 1 1 1

Working with emits in Vue 3 + Typescript

In this post I will show you'll how to work with emits Vue 3 + Composition API using <script setup>, there's few ways to work with it, let's take a look!

Using the defineEmits() macro we can declare emits like:

1 - Array of strings

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>
Enter fullscreen mode Exit fullscreen mode

2 - Object syntax

<script setup>
const emit = defineEmits({
  submit(payload) {
    // return `true` or `false` to indicate
    // validation pass / fail
  }
})
</script>
Enter fullscreen mode Exit fullscreen mode

3 - Runtime or base type declaration

<script setup lang="ts">
// runtime
const emit = defineEmits(['change', 'update'])

// type-based (TS)
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>
Enter fullscreen mode Exit fullscreen mode

That's it!

If you want to read and learn more details about component emits declaration, please make sure to visit the Vue 3 official documentation about emits.

See'ya!


Article references:
https://vuejs.org/guide/components/events.html
https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay