下面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"); }); } }
相关推荐:
更多编程相关知识,请访问:编程入门!!
Atas ialah kandungan terperinci 详解vue.js中如何处理事件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!