85

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.

Improve this question
3

3 Answers 3

Reset to default
175

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>

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

11 Comments

I have tried this: <a class="dropdown-item" v-for="item in drop" @click="$emit('select-menu-item', $event, item)"> then in component : <search-component v-bind="searchProps" @select-menu-item="selectedITem($event, item)"></search-component> and then in method : selectedITem(evt, item) { console.log("cl") console.log(evt, item) } and i'm getting : ReferenceError: item is not defined
no i'm getting the error on click ReferenceError: item is not defined –
Hmm, that's weird. @Abana Clara's solution should work. And you seem to do it right too.
@titan sure, edited the answer to emphasize that the reference must not have a parenthesis
@Č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.
|
32

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
}
Improve this answer

1 Comment

Thanks. This is really helpful for when you want to pass in some extra arguments from the parent component.
18

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>
Improve this answer

2 Comments

This answer solution my problem thanks.
If you want to "pass it on": <MyButton @update-item="(param1, param2) => $emit('update-item', param1, param2)"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.