vue.js中處理事件的方法

小編給大家分享一下vue.js中處理事件的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)建站已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、咸寧網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

當(dāng)您使用Vue構(gòu)建動態(tài)網(wǎng)站時，您很可能希望它能夠響應(yīng)事件。

例如，如果用戶單擊按鈕，提交表單，甚至只是移動鼠標(biāo)，您可能希望您的Vue網(wǎng)站以某種方式做出響應(yīng)。

使用Vue處理事件

我們可以通過將v-on指令添加到相關(guān)DOM元素來攔截事件。假設(shè)我們要處理對按鈕元素的點(diǎn)擊-我們可以在Vue模板中添加以下內(nèi)容：

<button v-on:click="clickHandler"></button>

請注意，我們在指令中添加了一個參數(shù)，該v-on參數(shù)將是我們要處理的事件的名稱（在本例中為click）。

然后，我們將表達(dá)式綁定到指令，該指令通常是您要用于處理事件的方法。在這種情況下，我們稱之為clickHandler。

提示：該v-on指令具有一個方便的速記形式@，可以代替以下形式使用v-on:：<button @click="clickHandler"></button>。

可以處理的事件類型

除了click之外，還可以處理哪些DOM事件？

Vue可以處理任何類型的web或移動本機(jī)事件（以及我們稍后將討論的自定義事件），包括：

submit
keyup
drag
scroll

最常見的DOM事件的列表

事件處理方法

如果將方法綁定到事件處理指令，我們現(xiàn)在可以運(yùn)行一些自定義代碼。

在本示例中，讓我們保持簡單，只將一條消息記錄到控制臺，但是您還可以做一些更有趣的事情，例如顯示/隱藏另一個元素，增加計數(shù)器等。

<div id="app">
  <button v-on:click="clickHanlder"></button>
</div>

new Vue({
  el: "#app",
  methods: {
    clickHandler () {
      console.log("You clicked the button!");
    }
  }
})

事件對象

事件對象將傳遞給事件處理程序，從而為如何響應(yīng)事件打開了更多的可能性。這個對象包含很多有用的屬性和方法，包括對事件起源的元素（event.target）、事件發(fā)生的時間（event.timeStamp）等的引用。

clickHandler (event) {
  console.log(`The button was clicked at ${event.timeStamp}.`);
}

請注意，此對象是由本機(jī)Web API提供的，而不是由Vue提供的，因此它將與您在純JavaScript中找到的對象相同。為了方便起見，以下是事件接口參考。

事件修飾符

JavaScript應(yīng)用程序中的一種常見模式是手動處理表單提交，而不是使用本機(jī)功能。為此，您需要preventDefault在運(yùn)行表單處理代碼之前使用Submit事件的本機(jī)方法，否則頁面將在有機(jī)會完成之前被重定向。

formHandler (event) {
  event.preventDefault();
  // form handling logic
}

Vue提供了一個事件修飾符來直接從模板執(zhí)行此操作，而不是在處理程序中手動執(zhí)行此操作。請注意，修飾符是'.'在指令之后添加的：

<form @submit.prevent="formHandler"></form>

Vue提供了幾種不同的事件修飾符，這些修飾符在常見事件處理場景中非常有用：

.stop
.prevent
.capture
.self
.once
.passive

自定義事件

到目前為止，我們一直在討論如何處理本機(jī)事件。但是Vue是一個基于組件的框架，所以我們可以讓組件發(fā)出它自己的事件嗎？

是的，這可能非常有用。假設(shè)希望子組件將數(shù)據(jù)發(fā)送到父組件。我們無法在此處使用道具，因?yàn)榈谰邤?shù)據(jù)僅在父級到子級之間傳遞，而在其他方面則不行。

ParentComponent
 |
 | (data travels down via props, never up)  
 v 
ChildComponent

解決方案是讓子組件發(fā)出事件，并讓父組件監(jiān)聽該事件。

為此，請this.$emit("my-event")在希望事件發(fā)出時從子組件中調(diào)用。例如，假設(shè)我們有一個組件DialogComponent，它需要通知其父MainPage它已關(guān)閉：

export default {
  methods: {
    onClose() {
      this.$emit("dialog-closed");
    }
  }
};

然后，父組件可以與本地事件完全一樣地處理自定義事件。

<div>
  <dialog-component @dialog-closed="eventHandler" />
</div>

您還可以在自定義事件中發(fā)送數(shù)據(jù)，該數(shù)據(jù)可以通過處理方法接收：

onClose() {
  this.$emit("dialog-closed", { time: Date.now() });
}

eventHandler (event, { time }) {
  console.log(`Dialog was closed at ${time}`);
}

提示：使用kebab-case名稱進(jìn)行自定義事件！HTML不區(qū)分大小寫，因此，例如myEvent，駝峰事件名稱將令人迷惑地myevent位于模板中。因此，最好使用kebab-case my-event，以免造成混淆。

活動巴士

如上所述，子組件可以將事件發(fā)送到父組件。但是，如果您希望組件將事件發(fā)送到層次結(jié)構(gòu)中的任何其他組件怎么辦？例如，同級，祖父母等。

為此，我們可以使用一種稱為事件總線的模式。在這里，我們創(chuàng)建了一個單獨(dú)的Vue實(shí)例，以將事件傳輸?shù)綄?dǎo)入該事件的任何組件。

首先，在新的模塊文件中創(chuàng)建并導(dǎo)出Vue實(shí)例：

import Vue from "vue";
export default new Vue();

接下來，將總線導(dǎo)入到您要發(fā)出事件的組件中。您可以使用$emit總線Vue實(shí)例的方法。

import eventBus from "./eventBus";

export default {
  ...
  methods: {
    myMethod () {
      eventBus.$emit("my-event")
    }
  }
}

最后，將總線導(dǎo)入到您想聽事件的組件中。然后，您應(yīng)該在代碼中的某個位置設(shè)置偵聽器。我建議您使用生命周期掛鉤，就像created您可以在此處訪問組件實(shí)例一樣。

這是通過$on總線方法完成的，該方法帶有兩個參數(shù)-您要監(jiān)聽的事件和一個回調(diào)。

import eventBus from "./eventBus";

export default {
  ...
  created () {
    eventBus.$on("my-event", () => {
      console.log("my-event called on global event bus");
    });
  }
}

以上是“vue.js中處理事件的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：vue.js中處理事件的方法
地址分享：http://bm7419.com/article42/jccgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、靜態(tài)網(wǎng)站、微信小程序、企業(yè)建站、自適應(yīng)網(wǎng)站、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容