Vue.js delegate event handler to parent component?

Question

I have a global component on my VM, like this

Vue.component('dropdown', function () {
    template: require('./templates/Dropdown.template.html'),

    components: {
        clients: require('./../modal/Clients.js')
    }
});

As you can see this global component has its own child component - clients

In the template of this child component I have click event happening:

<button @click.prevent="submitForm"></button>

Question:

Is it possible that the first global component Dropdown would be responsible for handling this event?

So I would have it like this

Vue.component('dropdown', function () {

    ...

    methods: {
        submitForm: function () {
            // handling event
        }
    },

    ...
});

Marian Klühspies · Accepted Answer · 2021-10-19 21:00:35Z

3

You can simply do this in your child component:

ChildComponent.vue

<button @click="$emit('click')">Child Component Button</button>

It will trigger the handler defined in your parent

ParentComponent.vue

<ChildComponent @click="myHandler()"/>

edited Oct 19, 2021 at 21:00

answered Oct 18, 2020 at 16:04

Marian Klühspies

18k20 gold badges112 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zxzak · Accepted Answer · 2016-01-15 09:48:22Z

-1

The preferred way to do this would be to send the event upwards using by $dispatch This avoids tight coupling which slightly defeats the purpose of independent, reusable components There is a very similar example in the documentation.

answered Jan 15, 2016 at 9:48

zxzak

9,4945 gold badges30 silver badges25 bronze badges

2 Comments

Sebi2020 Over a year ago

The VueJS developers removed the $dispatch method.

Almazik G Over a year ago

that's still a valid answer, there is no reason to downvote it. the API has changed, now one should use $emit() instead of dispatching the event

Collectives™ on Stack Overflow

Vue.js delegate event handler to parent component?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related