本文小編為大家詳細(xì)介紹“Vue3的事件處理和修飾符實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue3的事件處理和修飾符實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

成都創(chuàng)新互聯(lián)是專(zhuān)業(yè)的菏澤網(wǎng)站建設(shè)公司，菏澤接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行菏澤網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

基本事件處理

使用v-on指令(簡(jiǎn)稱(chēng)@)，我們可以監(jiān)聽(tīng)DOM事件并運(yùn)行處理程序方法或內(nèi)聯(lián)Javascript。

// v-on 指令   // OR  

向父組件發(fā)出自定義事件

任何Web框架中的常見(jiàn)用例都是希望子組件能夠向其父組件發(fā)出事件，這也是雙向數(shù)據(jù)綁定原理。

常見(jiàn)一個(gè)示例是將數(shù)據(jù)從 input組件發(fā)送到父表單。

根據(jù)我們使用的是Options API還是Composition API，發(fā)出事件的語(yǔ)法是不同的。

在 Options API 中，我們可以簡(jiǎn)單地調(diào)用this.$emit(eventName, payload),示例如下：

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

但是，Composition API 使用方式與此不同。需要在 Vue3 提供的 setup方法使用emit方法。

只要導(dǎo)入context對(duì)象，就可以使用與Options API相同的參數(shù)調(diào)用emit。

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

當(dāng)然，我在項(xiàng)目中經(jīng)常使用解構(gòu)的方式來(lái)使用：

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

完美!

無(wú)論我們使用Options 還是 Composition API，父組監(jiān)聽(tīng)的方式都是一樣的。

首先，我們可以在模板中使用$ event訪問(wèn)傳遞的值。

如果在組件 emit 出去方法有傳遞值，我們可以通過(guò)兩種不同的方式捕獲它，這取決于我們是使用內(nèi)聯(lián)還是使用方法。

第一種是在模板中使用$event訪問(wèn)傳遞的值。

第二，使用方法來(lái)處理事件，則傳遞的值將作為第一個(gè)參數(shù)自動(dòng)傳遞給我們的方法。

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

鼠標(biāo)修飾符

下面是我們可以在v-on指令中捕獲的主要DOM鼠標(biāo)事件列表：

 Interact with Me!