vue.js中处理事件的方法-创新互联

小编给大家分享一下vue.js中处理事件的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联为您提适合企业的网站设计让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到网站设计制作、做网站，我们的网页设计师为您提供的解决方案。

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

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

使用Vue处理事件

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

请注意，我们在指令中添加了一个参数，该v-on参数将是我们要处理的事件的名称（在本例中为click）。

然后，我们将表达式绑定到指令，该指令通常是您要用于处理事件的方法。在这种情况下，我们称之为clickHandler。

提示：该v-on指令具有一个方便的速记形式@，可以代替以下形式使用v-on:：。

可以处理的事件类型

除了click之外，还可以处理哪些DOM事件？

Vue可以处理任何类型的web或移动本机事件（以及我们稍后将讨论的自定义事件），包括：

submit
keyup
drag
scroll

最常见的DOM事件的列表

事件处理方法

如果将方法绑定到事件处理指令，我们现在可以运行一些自定义代码。

在本示例中，让我们保持简单，只将一条消息记录到控制台，但是您还可以做一些更有趣的事情，例如显示/隐藏另一个元素，增加计数器等。

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

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

然后，父组件可以与本地事件完全一样地处理自定义事件。

您还可以在自定义事件中发送数据，该数据可以通过处理方法接收：

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中处理事件的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

本文题目：vue.js中处理事件的方法-创新互联
路径分享：http://6mz.cn/article/djhcjh.html

网站建设知识

vue.js中处理事件的方法-创新互联

其他资讯