Лучшая практика
Лучшей практикой будет вариант № 1. Вы можете увидеть, что эта практика используется в официальной документации: https://vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events
Производительность
До тех пор, покаВы передаете ссылку на функцию, которая будет выполняться при использовании шины событий или при передаче в качестве реквизита, вы почти не увидите разницы в производительности.
Пример использования опции номер 1
Вы можете использоватьthis.$emit('eventName', dataToSend, ...) для отправки данных родительскому компоненту, который затем прослушивает компонент, подобный этому <my-component @eventName="yourHandler" />.После этого вы сможете использовать различную логику для каждой кнопки.
Я создал скрипку для компонента с множественным выбором, который реализует это: https://jsfiddle.net/wkdL0xbc/
// 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!')
}
}
})