thejefftrent.com

a website about Jeff Trent

VueJs Event With Multiple Parameters

VueJs event with multiple parameters

If you are trying to emit a custom event with multiple parameters like so:

//ChildComponent.vue

this.$emit('child-event', "hello", "world");

In the parent component where you listen for the event just have a reference to the function. Without the parentheses.

//MyComponent.vue

<ChildComponent
    v-on:child-event="myFunction"
/>

...

myFunction : function (param1, param2) {
    console.log(param1);
    console.log(param2);
}
/*
out results:
> hello
> world
 */

THESE WILL NOT WORK

<ChildComponent
    v-on:child-event="myFunction()"
/>

<ChildComponent
    v-on:child-event="myFunction($event)"
/>

<ChildComponent
    v-on:child-event="myFunction($event, param1)"
/>

<ChildComponent
    v-on:child-event="myFunction($event, $event2)"
/>

18 Dec 2020

Back to Blog