Vue3的事件处理和修饰符实例分析

本文小编为大家详细介绍“Vue3的事件处理和修饰符实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue3的事件处理和修饰符实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

基本事件处理

使用v-on指令(简称@)，我们可以监听DOM事件并运行处理程序方法或内联Javascript。

// v-on 指令 <div v-on:click='handleClick' />  // OR  <div @click='handleClick' />

向父组件发出自定义事件

任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件，这也是双向数据绑定原理。

常见一个示例是将数据从 input组件发送到父表单。

根据我们使用的是Options API还是Composition API，发出事件的语法是不同的。

在 Options API 中，我们可以简单地调用this.$emit(eventName, payload),示例如下：

export default {   methods: {     handleUpdate: () => {       this.$emit('update', 'Hello World')     }   } }

但是，Composition API 使用方式与此不同。需要在 Vue3 提供的 setup方法使用emit方法。

只要导入context对象，就可以使用与Options API相同的参数调用emit。

export default {   setup (props, context) {     const handleUpdate = () => {       context.emit('update', 'Hello World')     }      return { handleUpdate }   }  }

当然，我在项目中经常使用解构的方式来使用：

export default {   setup (props, { emit }) {     const handleUpdate = () => {       emit('update', 'Hello World')     }      return { handleUpdate }   }  }

完美!

无论我们使用Options 还是 Composition API，父组监听的方式都是一样的。

<HelloWorld @update='inputUpdated'/>

首先，我们可以在模板中使用$ event访问传递的值。

如果在组件 emit 出去方法有传递值，我们可以通过两种不同的方式捕获它，这取决于我们是使用内联还是使用方法。

第一种是在模板中使用$event访问传递的值。

<HelloWorld @update='inputUpdated($event)'/>

第二，使用方法来处理事件，则传递的值将作为第一个参数自动传递给我们的方法。

<HelloWorld @update='inputUpdated'/>  // ...  methods: {     inputUpdated: (value) => {       console.log(value) // WORKS TOO     } }

鼠标修饰符

下面是我们可以在v-on指令中捕获的主要DOM鼠标事件列表：

<div    @mousedown='handleEvent'   @mouseup='handleEvent'   @click='handleEvent'   @dblclick='handleEvent'   @mousemove='handleEvent'   @mouseover='handleEvent'   @mousewheel='handleEvent'   @mouseout='handleEvent' > Interact with Me! </div>

对于单击事件，我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: left，right 和 middle。

<!-- 这只会触发鼠标左键 --> <div @mousedown.left='handleLeftClick'> Left </div>

键盘修饰符

我们可以听三个DOM键盘事件：

<input    type='text'    placeholder='Type something'    @keypress='handleKeyPressed'    @keydown='handleKeyDown'    @keyup='handleKeyUp' />

通常，我们想检测某个键上的这些事件，有两种方法可以执行此操作。

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2. keycodes

3. Vue具有某些键的别名(enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released --> <input    type='text'    placeholder='Type something'    @keyup.enter='handleEnter' />  <!-- OR --> <input    type='text'    placeholder='Type something'    @keyup.13='handleEnter' />

系统修饰符

对于某些项目，我们可能只想在用户按下修饰键的情况下触发事件。修饰键类似于Command或shift。

在Vue中，有四个系统修饰符。

1. shift

2. alt

3. ctrl

4. meta (在mac上是CMD，在Windows上是Windows键)

这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。

<!-- 自定义快捷方式，杨使用Shift + 8 创建列表 --> <input    type='text'    placeholder='Type something'    @keyup.shift.56='createList' />

在Vue文档中，还有一个exact的修饰符，以确保仅在按下我们指定的键且没有其他键的情况下才触发事件。

<!-- 自定义快捷方式，只有Shift + 8 这两个按下时才会创建列表--> <input    type='text'    placeholder='Type something'    @keyup.shift.56.exact='createList' />

事件修饰符

对于所有DOM事件，我们可以使用一些修饰符来更改其运行方式。无论是停止传播还是阻止默认操作，Vue都有两个内置的DOM事件修饰符。

<!-- 阻止默认行为 --> <form @submit.prevent>  <!-- 阻止冒泡 --> <form @submit.stop='submitForm'>  <!-- 阻止默认行为和冒泡 --> <form @submit.stop.prevent='submitForm'>  <!-- 防止事件被多次触发 --> <div @close.once='handleClose'>

读到这里，这篇“Vue3的事件处理和修饰符实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。