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.
Emitting Events with setup()$emit() to send our event. Instead, we can access our emit method by using the second argument of our setup function – context . context has access to your components slots, attributes, and most importantly for us, its emit method. We can call context.
Emitting Event from Parent to Child We can create a new Vue instance create an event bus and then pass the Vue instance to the child to listen to it. We have the Vue instance in the bus field. Then we can emit the loadMore event to send the event which listens to events from the bus .
data # A function that returns the initial reactive state for the component instance. The function is expected to return a plain JavaScript object, which will be made reactive by 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>
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With