Vue事件處理指南– Vue3更新

做者：Fernando Doglio
譯者：前端小智
來源：medium

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

Vue事件處理是每一個Vue項目的必要方面。 它用於捕獲用戶輸入，共享數據以及許多其餘創造性方式。

在本文中，會介紹基礎知識，並提供一些用於處理事件的代碼示例。 它僅包含我認爲最有用的技巧/方法，要深刻了解Vue能夠作的全部事情，請查看Vue文檔。

基本事件處理

使用v-on指令(簡稱@)，咱們能夠監聽DOM事件並運行處理程序方法或內聯Javascript。

// v-on 指令
<div v-on:click='handleClick' />

// OR

<div @click='handleClick' />

向父組件發出自定義事件

任何Web框架中的常見用例都是但願子組件可以向其父組件發出事件，這也是雙向數據綁定原理。

常見一個示例是將數據從 input組件發送到父表單。

根據咱們使用的是Options API仍是Composition API，發出事件的語法是不一樣的。

在 Options API 中，咱們能夠簡單地調用this.$emit(eventName, payload) ,示例以下：

export default {
  methods: {
    handleUpdate: () => {
      this.$emit('update', 'Hello World')
    }
  }
}

可是，Composition API 使用方式與此不一樣。 須要在 Vue3 提供的 setup方法使用emit方法。

只要導入context對象，就可使用與Options API相同的參數調用emit。

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

固然，我在項目中常用解構的方式來使用：

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

完美！

不管咱們使用Options 仍是 Composition API，父組監聽的方式都是同樣的。

<HelloWorld @update='inputUpdated'/>

首先，咱們能夠在模板中使用$ event訪問傳遞的值。

若是在組件 emit 出去方法有傳遞值，咱們能夠經過兩種不一樣的方式捕獲它，這取決於咱們是使用內聯仍是使用方法。

第一種是在模板中使用$event訪問傳遞的值。

<HelloWorld @update='inputUpdated($event)'/>

第二，使用方法來處理事件，則傳遞的值將做爲第一個參數自動傳遞給咱們的方法。

<HelloWorld @update='inputUpdated'/>

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

鼠標修飾符

下面是咱們能夠在v-on指令中捕獲的主要DOM鼠標事件列表：

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='handleEvent'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
Interact with Me!
</div>

對於單擊事件，咱們還能夠添加鼠標事件修飾符來限制哪一個鼠標按鈕將觸發咱們的事件。有三個: left，right 和 middle。

<!-- 這隻會觸發鼠標左鍵 -->
<div @mousedown.left='handleLeftClick'> Left </div>

鍵盤修飾符

咱們能夠聽三個DOM鍵盤事件：

<input
   type='text'
   placeholder='Type something'
   @keypress='handleKeyPressed'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>

一般，咱們想檢測某個鍵上的這些事件，有兩種方法能夠執行此操做。

1. keycodes
2. Vue具備某些鍵的別名（enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released -->
<input
   type='text'
   placeholder='Type something'
   @keyup.enter='handleEnter'
/>

<!-- OR -->
<input
   type='text'
   placeholder='Type something'
   @keyup.13='handleEnter'
/>

系統修飾符

對於某些項目，咱們可能只想在用戶按下修飾鍵的狀況下觸發事件。 修飾鍵相似於Command或shift。

在Vue中，有四個系統修飾符。

1. shift
2. alt
3. ctrl
4. meta (在mac上是CMD，在Windows上是Windows鍵)

這對於在Vue應用程序中建立諸如自定義鍵盤快捷鍵之類的功能很是有用。

<!-- 自定義快捷方式，楊使用Shift + 8 建立列表 -->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56='createList'
/>

在Vue文檔中，還有一個exact的修飾符，以確保僅在按下咱們指定的鍵且沒有其餘鍵的狀況下才觸發事件。

<!-- 自定義快捷方式，只有Shift + 8 這兩個按下時纔會建立列表-->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56.exact='createList'
/>

事件修飾符

對於全部DOM事件，咱們可使用一些修飾符來更改其運行方式。 不管是中止傳播仍是阻止默認操做，Vue都有兩個內置的DOM事件修飾符。

<!-- 阻止默認行爲 -->
<form @submit.prevent>

<!-- 阻止冒泡 -->
<form @submit.stop='submitForm'>

<!-- 阻止默認行爲和冒泡 -->
<form @submit.stop.prevent='submitForm'>

<!-- 防止事件被屢次觸發 -->
<div @close.once='handleClose'>

~ 完，我是刷碗智，我去刷碗了，骨得白~

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://learue.co/2020/01/a-v...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。