根據昨天寫的計步器,如果在自訂傳遞參數的基礎上,需要使用系統的Event物件參數,可以用$event
來傳遞參數,例如:
click(step, event) {
console.log(event)
this.count += step
}
並使用以下方式綁定事件:
<button @click="click(2, $event)">點擊</button>
多事件處理 指的是針對同一個使用者互動事件,需要呼叫多個方法來進行處理。
以較簡單的做法來說,可以寫一個「匯總函數」來處理多個邏輯;
但在 Vue 中,也可以透過 逗號分隔,在同一個事件中呼叫多個函數。
以昨天的程式為例,原本的click
函數同時包含了「計數」與「列印log」的功能,
我們可以將它拆分為兩個函數:
methods: {
click(step) {
this.count += step
},
log(event) {
console.log(event)
}
}
這樣就成功將原本的click
函數拆分為click、log函數了,不過需要注意的是,如果要進行多事件處理,在綁定事件時,要採用內聯呼叫的方法來綁定兩個函數:
<button @click="click(2), log($event)">點擊</button>
今天的內容就到這裡,明天將繼續介紹的是「事件修飾符號」!