Emit event with parameters in vue

Question

i'm trying to emit function with parameters like that.

template: `
    <div class="searchDropDown">
    <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
        <span>{{selectedItem}}</span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a class="dropdown-item" v-for="item in drop" @click="$emit('select-menu-item($event)')">
          {{item.name}}
        </a>
      </div>
    </div>
  </div>
    </div>
  `

here is the i'm trying to pass item to method like a parameter.

here is my component which i try to emit function:

<search-component v-bind="searchProps" @select-menu-item="selectedITem($event)"></search-component>

and here is my method:

selectedITem(arg1) {
      console.log("cl")
      console.log(arg1)
    }

here is if i'm not trying to pass parameter everything well work so my method selectedITem is working. When i try to pass parameter like that nothing happened and i'm not getting some error.

FYI, as of version 2.2.0+, [`:key` will be mandatory](https://vuejs.org/v2/guide/list.html#v-for-with-a-Component), so better include one. — Yom T., Dec 12 '18 at 08:44

Abana Clara · Accepted Answer · 2020-03-06T10:53:14.600

169

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>

edited Mar 06 '20 at 10:53

answered Dec 12 '18 at 08:37

Abana Clara

4,602
3
18
31

I have tried this: then in component : and then in method : selectedITem(evt, item) { console.log("cl") console.log(evt, item) } and i'm getting : ReferenceError: item is not defined – user3348410 Dec 12 '18 at 08:41
no i'm getting the error on click ReferenceError: item is not defined – – user3348410 Dec 12 '18 at 08:45
Hmm, that's weird. @Abana Clara's solution should work. And you seem to do it right too. – Yom T. Dec 12 '18 at 08:52
@user3348410 Found your problem. Edited – Abana Clara Dec 12 '18 at 08:57
@AbanaClara i can pass string too but i cant pass the item which came from v-for can u look at fiddle https://jsbin.com/pejenov/edit?html,js,output – user3348410 Dec 12 '18 at 09:12
@AbanaClara i just delete () from @select-menu-item="selectedITem()" and everything work well. Thank u so much! regards – user3348410 Dec 12 '18 at 09:16
ahh struggled quite some time wondering why wont work, it's better to highlight that the function should remove the parenthesis in order to work. – titan Mar 06 '20 at 10:51
1

@titan sure, edited the answer to emphasize that the reference must not have a parenthesis – Abana Clara Mar 06 '20 at 10:53
thanks for this one, I think this is the way to do it. :) – Jenuel Ganawed Apr 12 '21 at 12:03
I dont understand. At first example you call $emit with $evetn object and in the last example you dont write $event object. What is wrong with me? – Čamo Jan 24 '22 at 15:25
1

@Čamo You don't have to put the event object as an argument, it's completely up to you. The only thing that matters here is throwing the name of the click event [in the emit function] you referenced in your component's markup. – Abana Clara Jan 25 '22 at 07:36

score 31 · Answer 2 · answered Oct 21 '20 at 09:36

31

just adding more answer from @Albana Clara.

You can merge your parameter along with the event passed.

EXAMPLE:

<search-component v-bind="searchProps" @select-menu-item="selectMenuItem('test', ...arguments)">

selectMenuItem: function(a, b) {
  console.log(a + " " + b);
  // test foobar
}

answered Oct 21 '20 at 09:36

Iqbal Tawakkal

445
4
11

8

Thanks. This is really helpful for when you want to pass in some extra arguments from the parent component. – xji Mar 24 '21 at 23:19

score 6 · Answer 3 · answered Sep 29 '22 at 08:22

If anyone searching how emits work in Vue3 with Composition API:

In the child component:

<script setup>

  const emit = defineEmits(["updateItem", "updateCount"])

  function itemizedLot() {
    emit("updateItem", param1, param2)
  }

  function countedLot() {
    emit("updateCount", param3, param4)
  }

</script>

<template>
  <button @click="itemizedLot"> Btn1 </button>
  <button @click="countedLot"> Btn2 </button>
</template>

In the parent component:

<script setup>

  // access the emitted methods and their parameters

  function updateMenuItem(param1, param2) {
    ...
  }

  function updateMenuCount(param3, param4) {
    ...
  }

</script>

<template>
  <MyButton @update-item="updateMenuItem" @update-count="updateMenuCount"/>
</template>

Emit event with parameters in vue

3 Answers3

Linked