Detailed explanation of how to handle events in vue.js

The followingvue.js tutorial will introduce to you how to use vue.js to handle events. I hope it will be helpful to everyone.

When you use Vue to build a dynamic website, you will most likely want it to respond to events.

For example, you might want your Vue website to respond in a certain way if the user clicks a button, submits a form, or even just moves the mouse.

Handling events using Vue

We can intercept events by adding the v-on directive to the relevant DOM element . Let's say we want to handle clicks on a button element - we can add the following to our Vue template:

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

Note that we added a parameter to the directive, the v-onparameter will be the name of the event we want to handle (click in this case).

We then bind the expression to the directive, which is typically the method you want to use to handle the event. In this case we call it clickHandler.

Tip: The v-on directive has a convenient shorthand form @, which can be used instead of v-on::<button></button>.

Event types that can be processed

In addition to click, what else can be processed DOM events?

Vue can handle any type of web or mobile native event (as well as custom events we'll discuss later), including:

• submit

• keyup

• drag

• scroll

Most common List of DOM events

Event handling methods

If we bind a method to an event handling directive, we can now Run some custom code.

In this example, let's keep it simple and just log a message to the console, but you can also do some more interesting things like show/hide another element, increment a counter, etc.

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

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

Event Object

The event object is passed to the event handler, opening up more possibilities for how to respond to the event. This object contains many useful properties and methods, including references to the element from which the event originated (event.target), the time when the event occurred (event.timeStamp), etc.

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

Please note that this object is provided by the native Web API, not Vue, so it will be the same object you find in pure JavaScript. For convenience, the following is the event interface reference.

Event Modifiers

A common pattern in JavaScript applications is to handle form submission manually instead of using native functionality. To do this, you need to use the preventDefault native method of the Submit event before running the form handling code, otherwise the page will be redirected before it has a chance to complete.

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

Vue provides an event modifier to do this directly from the template instead of doing it manually in a handler. Note that the modifier is the '.' added after the directive:

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

Vue provides several different event modifiers that are useful in common event handling scenarios:

• .stop

• .prevent

• .capture

• . self

• .once

• .passive

Custom event

So far we have been discussing how to handle native events. But Vue is a component-based framework, so can we make the component emit its own events?

Yes, this can be very useful. Suppose you want a child component to send data to a parent component. We can't use props here because prop data is only passed from parent to child and not otherwise.

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

The solution is to have the child component emit the event and have the parent component listen to the event.

To do this, call this.$emit("my-event") from the child component when you want the event to be emitted. For example, let's say we have a component DialogComponent that needs to notify its parent MainPage that it has been closed:

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

The parent component can then handle custom events exactly like local events.

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

You can also send data in a custom event, which can be received through the processing method:

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

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

Tip: Use kebab-case names for custom events! HTML is not case sensitive, so a camelcased event name, such as myEvent, will be confusing as myevent is in the template. Therefore, it is better to use kebab-case my-event to avoid confusion.

活动巴士

如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。

为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的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视频教程精选

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

The above is the detailed content of Detailed explanation of how to handle events in vue.js. For more information, please follow other related articles on the PHP Chinese website!