事件對(duì)象 是瀏覽器在觸發(fā)事件（比如點(diǎn)擊按鈕）時(shí)，自動(dòng)生成的一個(gè) “數(shù)據(jù)包”，里面存著事件的詳細(xì)信息（比如點(diǎn)了哪個(gè)按鈕、點(diǎn)在頁(yè)面的坐標(biāo)、事件類(lèi)型是點(diǎn)擊還是輸入）。

Vue 里有 2 種方式拿到這個(gè) “數(shù)據(jù)包”，本質(zhì)都是為了拿到事件信息做交互，只是用法場(chǎng)景不同。

方式 1：方法參數(shù)自動(dòng)接收（最簡(jiǎn)單常用）

場(chǎng)景：你只需要事件對(duì)象，不需要傳額外參數(shù)時(shí)，用這種方式。

代碼示例

<!-- 按鈕點(diǎn)擊時(shí)，Vue 會(huì)自動(dòng)把事件對(duì)象傳給 greet 方法 -->
<button @click="greet">點(diǎn)我Greet</button>

greet(cusEvent) { 
  // cusEvent 就是事件對(duì)象！名字你隨便?。ū热?e、event、myEvent 都可以）
  console.log(cusEvent.target.tagName); // 打印觸發(fā)事件的標(biāo)簽名（比如 BUTTON）
}

類(lèi)比理解

把 @click="greet" 想象成：

• 你點(diǎn)按鈕 → 瀏覽器 “扔出” 一個(gè)事件對(duì)象 → Vue 自動(dòng) “接住”，并把它當(dāng) “默認(rèn)禮物” 塞給 greet 方法。
• 方法里的參數(shù)名（比如 cusEvent），就像你給這個(gè) “禮物” 起的外號(hào)，叫啥都行，只要能拿到里面的信息。

方式 2：用 $event 手動(dòng)傳遞（需要傳額外參數(shù)時(shí)用）

場(chǎng)景：你不僅需要事件對(duì)象，還想傳其他參數(shù)（比如 ID、狀態(tài)）時(shí)，必須用 $event 手動(dòng)把事件對(duì)象傳過(guò)去。

代碼示例

<!-- 點(diǎn)擊時(shí)，主動(dòng)用 $event 把事件對(duì)象傳給 greet2，同時(shí)還能傳其他參數(shù)（比如 '額外信息'） -->
<button @click="greet2('額外信息', $event)">點(diǎn)我Greet2</button>

greet2(msg, event) { 
  // msg 是你傳的 '額外信息'，event 是 $event 對(duì)應(yīng)的事件對(duì)象，這個(gè)名字可以自己定義
  console.log(msg); // 打?。侯~外信息
  console.log(event.clientX); // 打印點(diǎn)擊位置的 X 坐標(biāo)
}

類(lèi)比理解

把 @click="greet2('額外信息', $event)" 想象成：

你點(diǎn)按鈕時(shí)，想給 greet2 方法傳 2 個(gè) “禮物”：

• 第一個(gè)禮物：你手動(dòng)寫(xiě)的 '額外信息'（自定義參數(shù)）。
• 第二個(gè)禮物：必須用 $event 這個(gè) “固定包裝”，把事件對(duì)象包起來(lái)傳過(guò)去。

方法里的參數(shù)（msg, event）要和傳遞順序?qū)?yīng)，這樣才能正確拿到兩個(gè) “禮物”。

兩種方式的核心區(qū)別

舉個(gè)生活例子加深理解

假設(shè)你是餐廳服務(wù)員（方法），客人（按鈕）點(diǎn)餐（觸發(fā)事件）：

• 方式 1：客人只說(shuō) “結(jié)賬”（@click="greet"），系統(tǒng)自動(dòng)給你遞上 “賬單”（事件對(duì)象），你直接處理賬單（greet(cusEvent)）。
• 方式 2：客人說(shuō) “結(jié)賬，再加一份小吃”（@click="greet2('加小吃', $event)"），你需要同時(shí)拿到 “賬單”（事件對(duì)象，用 $event 傳）和 “加小吃” 的要求（自定義參數(shù)），再一起處理。

總結(jié)

• 事件對(duì)象 是瀏覽器給的 “事件詳情包”，Vue 提供了 2 種拿包方式。
• 簡(jiǎn)單場(chǎng)景用 方式 1（自動(dòng)接收），復(fù)雜場(chǎng)景（需要傳額外數(shù)據(jù)）用 方式 2（$event 手動(dòng)傳）。
• 記住 $event 是 Vue 規(guī)定的 “傳事件對(duì)象的固定語(yǔ)法”，而方法里的參數(shù)名可以自己隨便取～

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論