iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0

根據昨天寫的計步器,如果在自訂傳遞參數的基礎上,需要使用系統的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函數拆分為clicklog函數了,不過需要注意的是,如果要進行多事件處理,在綁定事件時,要採用內聯呼叫的方法來綁定兩個函數:

<button @click="click(2), log($event)">點擊</button>

今天的內容就到這裡,明天將繼續介紹的是「事件修飾符號」!


上一篇
Day 1
下一篇
Day 3
系列文
從零開始學習TypeScript、Vue.js !!4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言