vue.js中處理事件的方法

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

當您使用Vue構建動態網站時，您很可能希望它能夠響應事件。

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

使用Vue處理事件

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

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

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

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

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

可以處理的事件類型

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

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

• submit

• keyup

• drag

• scroll

最常見的DOM事件的列表

事件處理方法

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

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

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

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

事件對象

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

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

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

事件修飾符

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

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

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

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

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

• .stop

• .prevent

• .capture

• .self

• .once

• .passive

自定義事件

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

是的，這可能非常有用。 假設希望子組件將數據發送到父組件。 我們無法在此處使用道具，因為道具數據僅在父級到子級之間傳遞，而在其他方面則不行。

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

解決方案是讓子組件發出事件，并讓父組件監聽該事件。

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

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

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

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

您還可以在自定義事件中發送數據，該數據可以通過處理方法接收：

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

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

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

活動巴士

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

為此，我們可以使用一種稱為事件總線的模式。在這里，我們創建了一個單獨的Vue實例，以將事件傳輸到導入該事件的任何組件。

首先，在新的模塊文件中創建并導出Vue實例：

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

接下來，將總線導入到您要發出事件的組件中。您可以使用$emit總線Vue實例的方法。

import eventBus from "./eventBus";

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

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

這是通過$on總線方法完成的，該方法帶有兩個參數-您要監聽的事件和一個回調。

import eventBus from "./eventBus";

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

以上是“vue.js中處理事件的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！