Vue中的事件綁定問題

更新時(shí)間：2023年11月15日 14:47:58 作者：職場(chǎng)007

這篇文章主要介紹了Vue中的事件綁定問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

何為事件綁定

當(dāng)我們開發(fā)完UI界面后，還需要和用戶交互，所謂交互也就是用戶可以點(diǎn)擊界面上的按鈕，文字，鏈接等以及點(diǎn)擊鍵盤上的按鈕，我們開發(fā)的程序可以做出對(duì)應(yīng)的反應(yīng)。

做出的反應(yīng)會(huì)通過UI界面再反饋給用戶，或是對(duì)話框，或是跳轉(zhuǎn)到新頁面。

總之就是響應(yīng)用戶的某個(gè)操作。

在VUE3中定義事件綁定可以通過在你想注冊(cè)點(diǎn)擊事件的dom元素中，使用@click = "響應(yīng)操作的JS函數(shù)"的方式來實(shí)現(xiàn)，方式不唯一，這種方式是一種簡寫，感興趣的可以去官網(wǎng)查看不同的寫法，這里主要是為了演示VUE3事件綁定

示例解析

簡單情景解析

示例：假設(shè)我們要實(shí)現(xiàn)一個(gè)簡單的計(jì)數(shù)器功能，即點(diǎn)擊按鈕，計(jì)數(shù)器會(huì)一直加一。

注：此例子用在真實(shí)的環(huán)境中就可能是統(tǒng)計(jì)用戶量或者訪問量，只是這里做演示用將觸發(fā)計(jì)數(shù)的操作用按鈕的方式實(shí)現(xiàn)。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event bind</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter:0
            }
        },
        methods: {
            //事件修飾符：stop，prevent，capture，self,once,passive
            //按鍵修飾符：enter，tab,delete,esc,up,down,left,right
            //鼠標(biāo)事件修飾符：left,right,middle
            handleBtnClick(){
                this.counter+=1;
            },
        },
        template:`
        <div>
           {{counter}}
                <button @click="handleBtnClick()">button</button>
            <input @keydown.enter="handleBtnClick()">點(diǎn)擊事件</input>
        </div>
        `
    });
   const vm = app.mount('#root');
</script>
</html>

我們綁定的事件主要大致分為，鼠標(biāo)點(diǎn)擊事件，拖拽事件，鍵盤事件，在上面的代碼示例中主要演示了鼠標(biāo)，點(diǎn)擊事件和鍵盤事件，默認(rèn)顯示的是0，當(dāng)我們點(diǎn)擊button或者是聚焦輸入框后按下鍵盤上的enter鍵時(shí)，都會(huì)調(diào)用JS函數(shù)handleBtnClick()進(jìn)行加一操作。

運(yùn)行截圖：

上圖中有一個(gè)button和一個(gè)輸入框，以及左上角一個(gè)顯示計(jì)數(shù)值的區(qū)域，點(diǎn)擊button，或者是點(diǎn)擊輸入框，使其進(jìn)入到輸入狀態(tài)時(shí)，再點(diǎn)擊鍵盤的enter鍵，計(jì)數(shù)值都會(huì)加一

這里是為了演示點(diǎn)擊事件和鍵盤事件

特殊情景避坑

上面的示例看似實(shí)現(xiàn)了我們的需求，但是有種特殊的情況可能會(huì)導(dǎo)致我們遇見意外的情況，那就是當(dāng)我們的button作為子控件并綁定了點(diǎn)擊事件，button的父控件，比如一個(gè)DIV也綁定了一個(gè)事件，這時(shí)候我們點(diǎn)擊button，會(huì)出現(xiàn)什么情況呢？

我們一起看看：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event bind</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter:0
            }
        },
        methods: {
            //事件修飾符：stop，prevent，capture，self,once,passive
            //按鍵修飾符：enter，tab,delete,esc,up,down,left,right
            //鼠標(biāo)事件修飾符：left,right,middle
            handleBtnClick(){
                this.counter+=1;
            },
            handleDivClick(){
                alert('div clicked!')
            }
        },
        template:`
        <div>
            <div @click="handleDivClick()">
                {{counter}}
                <button @click="handleBtnClick()">button</button> 
            </div>
            <input @keydown.enter="handleBtnClick()">點(diǎn)擊事件</input>
        </div>
        `
    });
   
   const vm = app.mount('#root');
</script>
</html>

正如代碼所示，我們給button加一個(gè)父DIV，然后給父DIV也幫定了一個(gè)點(diǎn)擊事件，點(diǎn)擊DIV時(shí)讓其執(zhí)行handleDivClick函數(shù)顯示一個(gè)彈窗。

這會(huì)出現(xiàn)啥呢？

關(guān)鍵代碼如下：

<div @click="handleDivClick()">
    {{counter}}
    <button @click="handleBtnClick()">button</button> 
</div>

結(jié)果是，會(huì)先響應(yīng)父DIV的時(shí)間，顯示一個(gè)彈窗

當(dāng)我們點(diǎn)擊了彈窗的確定了后，在響應(yīng)button的操作進(jìn)行計(jì)數(shù)器加一操作。

這種結(jié)果很明顯是不符合我們預(yù)期的，我們想要的效果是點(diǎn)擊按鈕的時(shí)候響應(yīng)按鈕的操作，點(diǎn)擊DIV的時(shí)候響應(yīng)DIV的操作，但是這時(shí)候兩個(gè)事件混在一起了，那我們?cè)撛趺崔k呢？

Vue3給出了解決辦法那就是加事件修飾符：stop，prevent，capture，self,once,passive。

如下所示：

<div @click.self="handleDivClick()">
    {{counter}}
    <button @click.stop="handleBtnClick()">button</button> 
</div>

這種情況其實(shí)可以稱為事件冒泡，我們點(diǎn)擊按鈕的時(shí)候，事件先到了DIV，所以響應(yīng)了DIV的操作，然后又傳到了button，所以當(dāng)執(zhí)行完DIV的操作后又會(huì)繼續(xù)執(zhí)行button的操作。

解決這種問題可以給button加一個(gè)stop事件修飾符，或者是給父DIV加一個(gè)self修飾符就可以了。

這樣他們的事件就不會(huì)混到一起了。

總結(jié)

其實(shí)事件綁定就是給用戶一個(gè)和我們程序交互到接口，讓用戶可以通過鼠標(biāo)，鍵盤，屏幕觸摸，手勢(shì)等輸入來執(zhí)行自己想要的操作，本文只是簡單介紹了事件綁定的基本知識(shí)和一個(gè)小坑，讀者若是想深入的了解事件綁定的具體使用，請(qǐng)參考官網(wǎng)的詳細(xì)API。

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

您可能感興趣的文章: