[Vuejs]-What is the alternative to using this.$on method for listening to events in the Vue 3 setup script?

by

0👍

On Vue3, It’s pretty straight forward. Function inside setup function can be assigned straight to emit function.

Emit the already defined event from your child component.

<template>
    <input @change="validate" />
</template>

<script setup>
function validate(){
    // Validation
    emit("validate", WithDesiredParameters);
}
const emit = defineEmits(['validate'])
</script>

Then,

ParentComponent.vue

<template>
   <ChildComponent @validate="yourFunction">
</template>

<script setup>
const yourFunction = (event) => {
    // your business logic .. you can access the emitted via event.SomeThing
}
</script>

For more, check out the docs

0👍

Here is an example how you can use emits inside setup function in child component.

ChildComponent.vue

<template>
   <button @click="buttonClick">Click Button</button>
</template>

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

function buttonClick() {
  emit('submit') // Works same as $emit('submit') in a template
}
</script>

In composition API, function setup is kind of a life cycle hook that is nearly the same as beforeCreate or created in Vue 2 version.

Link to doc

Leave a comment