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

Question

I used Vue a few years ago, but haven't written any code since the composition API was released. I'm having trouble finding documentation on how to listen to events within a component using the new <script setup>. In my component, I have an event called 'validate', which I've registered using defineEmits. In the past, I would have listened for this event in the mounted hook using this.$on. What is the alternative approach to doing this in the Vue 3 <script setup>?

This is how I defined the event

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

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

Vue 2 version of what I'm trying to achieve

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

<script>
export default {
    methods: {
        validate(){
            //validation
        }
    },
    mounted(){
        this.$on('validate', validate)
    }
}
</script>

Please correct me if I'm following the wrong idea here. I haven't been following the updates for a while. I'd really appreciate any useful hints.

Thanks in advance.

Mussie · Answer 1 · 2023-03-18T21:42:25.740

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

edited Mar 18 '23 at 21:42

answered Mar 18 '23 at 21:05

Mussie

154
1
7

I'm not sure, but I think @Nizar is asking about how to emit function inside Child component setup function. – Mises Mar 18 '23 at 21:32
Oh, edited for that scenario. – Mussie Mar 18 '23 at 21:43
@Mussie, Thank you for taking the time to answer my question. I need to trigger validation from outside the component. I can emit the event from the parent component. When the event is emitted, I need to call the `validate` function within the child component. The exact use case is shown in the Vue 2 example I've added in the question. – Nizar Mar 19 '23 at 10:40
@Nizar, when the event is emitted from the child and you want to listen on the parent component. The above example works. But if the reverse is the case :- emitting from the parent and listening to the child or siblings, you should use packages likehttps://www.npmjs.com/package/mitt. Vue does not have built-in functionality for it as far as I know. Provide/inject can go down parent-child-child-child but it just passes data since the principle works as events up, data down. – Mussie Mar 19 '23 at 17:28

score 0 · Answer 2 · answered Mar 18 '23 at 21:44

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

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

This is how I defined the event

Vue 2 version of what I'm trying to achieve

2 Answers2