在Vue.js中，如何通過父子v-on傳遞另一個參數，從子到父發出多個值？

Question

這是一個代碼示例。

Vue.component('button-counter', { 
    template: '<button v-on:click="emit_event">button</button>', 
    methods: { 
    emit_event: function() { 
     this.$emit('change', 'v1', 'v2', 'v3') // Here I emit multiple value 
    } 
    }, 
}) 
new Vue({ 
    el: '#parent', 
    data: { 
    args: "" 
    }, 
    methods: { 
    change: function (...args) { 
     this.args = args 
     console.log(args) 
    } 
    } 
}) 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.common.js"></script> 
<div id="parent"> 
    {{ args }} <br /> 
    <button-counter v-on:change="change(1234, $event)"></button-counter> 
</div> 

從父組件，我想通過改變參數通（）（在這個例子中，1234），也可由子組件所發出的每一個值。 我嘗試使用$事件捉值的孩子發出，但是$事件僅設立的第一個值的孩子發出（INT這個例子中，「V1」）

有沒有辦法做到這一點？我知道我可以發射一個數組來捕獲多個值。但是一些圖書館只是發出多重價值。

這是上例的代碼。 https://codepen.io/anon/pen/MmLEqX?editors=1011

Answer 1

定義一個處理程序，它接受事件中的多個參數，並將它們傳遞給除靜態參數外的更改方法。

<button-counter v-on:change="(...args)=>this.change(1234,...args)"></button-counter> 

備選地

<button-counter v-on:change="(...args)=>this.change([1234,...args])"></button-counter> 

並更改方法

change: function (args) { 
    this.args = args 
    console.log(args) 
}