您现在的位置是:网站首页>前端技术>VueVue

详解vue.js中如何处理事件

神夜2020-10-30 09:07:03Vue3381人已围观文章来源:PHP中文网

简介当您使用Vue构建动态网站时,您很可能希望它能够响应事件。例如,如果用户单击按钮,提交表单,甚至只是移动鼠标,您可能希望您的Vue网站以某种方式做出响应。

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

相关推荐:

2020年前端vue面试题大汇总(附答案)

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

更多编程相关知识,请访问:编程入门!!

以上就是详解vue.js中如何处理事件的详细内容,更多请关注php中文网其它相关文章!

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们