簡單介紹vue基本事件處理

本篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於基本事件處理的相關問題，Vue 事件處理是每個 Vue 專案的必要方面。它用於捕獲用戶輸入，共享數據以及許多其他創造性方式。下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

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

在本文中，我將介紹基礎知識，並提供一些用於處理事件的程式碼範例。

基本事件處理

使用v-on 指令（@ 簡稱），我們可以監聽DOM 事件並執行處理程序方法或內嵌Javascript：

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />

我們將介紹您可能想要捕獲的一些更常見的事件，請按一下此處以取得DOM 事件的完整清單。

發出自訂事件

任何 Web 框架中的常見用例都是希望子元件能夠向其父元件發出事件。這將允許雙向資料綁定。

這樣的一個範例是將資料從輸入元件傳送到父表單。

根據我們使用的是 Options API 還是 Composition API，發出事件的語法是不同的。

在 Options API 中，我們可以簡單地呼叫 this.$emit(eventName, payload)：

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

但是，Composition API 沒有 this。相反，我們可以使用 Vue3 setup 方法直接存取 emit 方法。

setup 方法的第二個參數是上下文變量，它包含三個屬性：attrs、slot 和 emit。

只要匯入上下文對象，就可以使用與 Options API 相同的參數來呼叫 emit。

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

整理程式碼的一種方法是使用物件解構直接匯入 emit。看起來像這樣。

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

無論我們使用 Options API 或 Composition API，我們的父元件都以相同的方式監聽自訂事件。

<HelloWorld @update=&#39;inputUpdated&#39;/>

如果我們發出的方法也傳遞了一個值，則可以用兩種不同的方式捕獲它-取決於我們是內聯工作還是使用其他方法。

首先，我們可以 $event 在範本中使用傳遞的值。

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

其次，如果我們使用方法來處理事件，則傳遞的值將作為第一個參數自動傳遞給我們的方法。

<HelloWorld @update=&#39;inputUpdated&#39;/>