vue 是一套用于构建用户界面的渐进式 JavaScript 框架. 与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用. 本文为大家介绍了使用 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");
- });
- }
- }
本文由 HTML 中文网翻译自: https://vuejsdevelopers.com/2020/01/06/handling-events-vue-js/.
更多 vue.JS 知识请关注 HTML 中文网 vue.JS 教程 https://www.html.cn/web/vue-js/ 栏目.
来源: http://www.css88.com/web/vue-js/16062.html