Emit event with parameters in vue

The following argument(s) in $emit() are the arguments in your emitted function.

$emit('select-menu-item', $event, 1, 2, 3, 4, "cupcakes")

and in your component method.

selectMenuItem: function(evt, num1, num2, num3, num4, food){}

And in your actual component markup, you don't need to add arguments, just write the reference to the method without parenthesis.

<search-component v-bind="searchProps" @select-menu-item="selectMenuItem">

SAMPLE

window.onload = function(){ const component = function() {    return {       template: `       <div>         <button @click="$emit('click-me', 'foobar')">            Click Me         </button>       </div>       `,       props: ["data"]    } } new Vue({       el: container,       data: {},       components: { "my-component": component(), },       methods: {          clickMe: function(str){            console.log(str);          }       }    });}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="container">  <my-component :data=$data @click-me="clickMe"></my-component></div>

Expand snippet