我在做vue項目時,引入了一個插件vue-draggable-resizable。插件裏封裝了一些方法,該方法有定義好的參數。
<vdr
v-for="item in allData"
:key="item.id"
:x="item.x"
:y="item.y"
:w="item.width"
:h="item.height"
:min-width="200"
:min-height="200"
:isActive="true"
:isConflictCheck="true"
@resizing="onResize">
// onResize方法原有的參數是x, y, width, height
onResize(x, y, width, height) {
console.log(x);
}
但是我項目中由於是循環,需要再加一個參數item。既要保留原有的參數,也要把我定義的參數加進去,所以正確的寫法是
<vdr
v-for="item in allData"
:key="item.id"
:x="item.x"
:y="item.y"
:w="item.width"
:h="item.height"
:min-width="200"
:min-height="200"
:isActive="true"
:isConflictCheck="true"
@resizing="onResize(arguments, item)">
onResize (arg, item) {
// 此時的arg是一個數組,裏面包括原參數 x, y, width, height
console.log(arg[0]) // 最後打印出來的值就是原參數的x
}
簡而言之就是事件的原參數如果有多個就用arguments表示,原參數按照順序放在arguments數組裏面了,arguments後面可添加我們需要的參數。如果原參數只有一個,可以用$event表示,再在後面添加我們自定義的參數
// $event用來表示原參數,a是自定義的參數
<div @click="funSome(a, $event)"></div>
funSome(a, $event) {
console.log($event);
console.log(a)
}