關於父元件通過v-on接收子元件多個引數的一點研究
阿新 • • 發佈:2018-12-19
寫元件的時候遇到一個需求,我需要在子元件向父元件傳遞資訊
this.$emit('myEvent', 資訊1, 資訊2)
在父元件使用v-on來接收
<my-component @myEvent="handler"/>
這樣就可以接收到子元件傳遞的資訊1
和資訊2
,easy。
handler(param1, param2){
console.log(param1, param2) // => 資訊1, 資訊2
}
但我需要在內聯語句中傳遞一個額外引數,平時子元件只附帶一個引數的時候,可以使用$event
<my-component @myEvent="handler('extra parameter', $event)"/>
但是$event只接收第一個引數,也就是這麼寫只能接收到資訊1
handler(extra, param1, param2){
console.log(extra, param1, param2) // => 'extra parameter', 資訊1, undefined
}
最後找到了一個解決辦法
<my-component @myEvent="handler('extra parameter', arguments[0], arguments[1])"/>
可以獲取到引數了
handler(extra, param1, param2){ console.log(extra, param1, param2) // => 'extra parameter', 資訊1, 資訊2 }
因為實際上這裡的$event
就是arguments[0]
,下面這一段現在的vue文件上好像已經找不到了,但是arguments
還是可以用的
多提一句,當v-on
的引數是dom事件時,$event
代表的是原生的event
事件
以上
來源:https://segmentfault.com/a/1190000016107619