HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>Expected output: <code>{{ JSON.stringify(expected) }}</code></p>
<component @emission="hearEmission">complete data, without extras</component>
<component @emission="hearEmission('extra', ...arguments)">with extras, incomplete data</component>
<component @emission="function (a, b, c) { hearEmission('extra', a, b, c) }">expected, overly explicit</component>
<ol class="log">
<li v-for="line in logs"><code>{{ JSON.stringify(line) }}</code></li>
</ol>
</div>
Script:
Vue.component('component', {
template: '<button @click="emitEvent"><slot></slot></button>',
methods: {
emitEvent: function() {
this.$emit('emission', 1, 2, 3);
}
}
});
new Vue({
el: '#app',
data: {
logs: [],
expected: ['extra', 1, 2, 3]
},
methods: {
hearEmission: function(extra, a, b, c) {
this.logs.push([extra, a, b, c]);
if (this.logs.length === 11) {
this.logs.splice(0, 1);
}
}
}
})
Reference:
https://jsfiddle.net/50wL7mdz/30115