Recommended Approach
The best practice in this scenario would be to go with option number 1. This approach is clearly outlined in the official Vue.js documentation under the section: Sending Messages to Parents with Events
Performance
When passing a reference to a function for execution either through an event bus or as a prop, you should not experience any noticeable performance drawbacks.
Illustrative Example of Option 1
To implement option 1, use the following syntax:
this.$emit('eventName', dataToSend, ...)
to transmit data to the parent component which will then listen for the event like so:
<my-component @eventName="yourHandler" />
. This allows for the differentiation of logic based on each button function.
For demonstration purposes, I have put together a fiddle showcasing a multi-select component that applies this methodology: Multi-Select Component Fiddle
// HTML
<div id="app">
<multi-choice :items="myItems" @selected="alert($event)"></multi-choice>
<multi-choice :items="myItems" @selected="sayIsCool"></multi-choice>
</div>
// JavaScript
const multiChoice = {
template: '<div class="multi-choice"><span v-for="item in items" @click="select(item)">{{ item }}</span></div>',
props: ['items'],
methods: {
select(item) {
this.$emit('selected', item);
}
}
};
new Vue({
el: "#app",
data() {
return {
myItems: [
'Homer',
'Marge',
'Bart'
],
}
},
components: {
multiChoice: multiChoice
},
methods: {
sayIsCool(item) {
alert(item + ' is cool!')
}
}
})