本篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於基本事件處理的相關問題，Vue 事件處理是每個 Vue 專案的必要方面。它用於捕獲用戶輸入，共享數據以及許多其他創造性方式。下面一起來看一下，希望對大家有幫助。
【相關推薦：javascript影片教學、vue.js教學】
Vue 事件處理是每個Vue 專案的必要方面。它用於捕獲用戶輸入，共享數據以及許多其他創造性方式。
在本文中，我將介紹基礎知識，並提供一些用於處理事件的程式碼範例。
基本事件處理
使用v-on 指令（@ 簡稱），我們可以監聽DOM 事件並執行處理程序方法或內嵌Javascript：
<div v-on:click='handleClick' /> <!-- 相当于 --> <div @click='handleClick' />
我們將介紹您可能想要捕獲的一些更常見的事件，請按一下此處以取得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='inputUpdated'/>
如果我們發出的方法也傳遞了一個值，則可以用兩種不同的方式捕獲它-取決於我們是內聯工作還是使用其他方法。
首先，我們可以 $event 在範本中使用傳遞的值。
<HelloWorld @update='inputUpdated($event)'/>
其次，如果我們使用方法來處理事件，則傳遞的值將作為第一個參數自動傳遞給我們的方法。
<HelloWorld @update='inputUpdated'/>熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）1 個月前By尊渡假赌尊渡假赌尊渡假赌R.E.P.O.最佳圖形設置1 個月前By尊渡假赌尊渡假赌尊渡假赌刺客信條陰影：貝殼謎語解決方案2 週前ByDDDR.E.P.O.如果您聽不到任何人，如何修復音頻1 個月前By尊渡假赌尊渡假赌尊渡假赌R.E.P.O.聊天命令以及如何使用它們1 個月前By尊渡假赌尊渡假赌尊渡假赌熱工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
