本篇文章给大家带来了关于vue的相关知识,其中主要介绍了关于基本事件处理的相关问题,Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入,共享数据以及许多其他创造性方式。下面一起来看一下,希望对大家有帮助。
【相关推荐:javascript视频教程、vue.js教程】
Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入,共享数据以及许多其他创造性方式。
在本文中,我将介绍基础知识,并提供一些用于处理事件的代码示例。
使用 v-on 指令(@ 简称),我们可以监听 DOM 事件并运行处理程序方法或内联 Javascript:
<div v-on:click='handleClick' /> <!-- 相当于 --> <div @click='handleClick' />
我们将介绍您可能想捕获的一些更常见的事件,单击此处以获取 DOM 事件的完整列表。
任何 Web 框架中的常见用例都是希望子组件能够向其父组件发出事件。这将允许双向数据绑定。
这样的一个示例是将数据从输入组件发送到父表单。
根据我们使用的是 Options API 还是 Composition API,发出事件的语法是不同的。
在 Options API 中,我们可以简单地调用 this.$emit(eventName, payload):
export default { methods: { handleUpdate() { this.$emit('update', 'Hello World') } } }
但是,Composition API 没有 this。相反,我们可以使用 Vue3 setup 方法直接访问 emit 方法。
setup 方法的第二个参数是上下文变量,它包含三个属性:attrs、slot 和 emit。
只要导入上下文对象,就可以使用与 Options API 相同的参数来调用 emit。
export default { setup (props, context) { const handleUpdate = () => { context.emit('update', 'Hello World') } return { handleUpdate } } }
整理代码的一种方法是使用对象解构直接导入 emit。看起来像这样。
export default { setup (props, { emit }) { const handleUpdate = () => { emit('update', 'Hello World') } return { handleUpdate } } }
无论我们使用 Options API 还是 Composition API,我们的父组件都以相同的方式监听自定义事件。
<HelloWorld @update='inputUpdated'/>
如果我们发出的方法也传递了一个值,则可以用两种不同的方式捕获它-取决于我们是内联工作还是使用其他方法。
首先,我们可以 $event 在模板中使用传递的值。
<HelloWorld @update='inputUpdated($event)'/>
其次,如果我们使用方法来处理事件,则传递的值将作为第一个参数自动传递给我们的方法。
<HelloWorld @update='inputUpdated'/>热门教程更多>
Vue2.0+Vue3.0全套视频教程334127 Vue实战—打造属于自己的外卖系统88235 webpack+vue—从零开始打造前端项目50061