詳解vue.js中如何處理事件

下面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></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");
    });
  }
}

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是詳解vue.js中如何處理事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！