1. 程式人生 > >關於父元件通過v-on接收子元件多個引數的一點研究

關於父元件通過v-on接收子元件多個引數的一點研究

寫元件的時候遇到一個需求,我需要在子元件向父元件傳遞資訊


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