详解vue.js中如何处理事件-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

下面vue.js教程给大家介绍一下使用vue.js处理事件的方法，希望对大家有一定的帮助。

当您使用Vue构建动态网站时，您很可能希望它能够响应事件。

例如，如果用户单击按钮，提交表单，甚至只是移动鼠标，您可能希望您的Vue网站以某种方式做出响应。

使用Vue处理事件

我们可以通过将v-on指令添加到相关DOM元素来拦截事件。假设我们要处理对按钮元素的点击-我们可以在Vue模板中添加以下内容：

1	`<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提供了一个事件修饰符来直接从模板执行此操作，而不是在处理程序中手动执行此操作。请注意，修饰符是'.'在指令之后添加的：

1	`<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实例：

1 2	`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中如何处理事件的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 详解vue.js中如何处理事件

相关推荐

评论