Vue中的$event详解

最近学习Vue的过程中，接触到了事件对象$event，记录一下我的理解。

场景1：获取原生DOM事件的事件对象

在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象

<template>
<button @click="getData($event)">按钮</button>
</template><script>
export default {setup() {const getData = (e) => {console.log(e)}return {getData}}
}
</script>

当我们点击button按钮时，可以看到控制台打印出的事件对象，如下图：

通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码。

场景2：事件注册所传的参数(子组件向父组件传值)

在子组件中通过$emit注册事件，将数据作为参数传入，在父组件中通过$event接收

父组件：

<template>
<Hello @hello="showData($event)" />
<h4>{{data}}</h4>
</template><script>
import Hello from '@/components/Hello.vue'
import {ref
} from 'vue'
export default {components: {Hello},setup() {const data = ref(null)const showData = (e) => {data.value = e}return {showData,data}}
}
</script>

子组件：

<template>
<button @click="$emit('hello', 'hello')">Hello</button>
<!-- $emit()的第一个参数是定义的事件名，第二个参数是要传入的数据 -->
</template><script>
export default {}
</script>

此时我们点击hello按钮，就会将子组件传入的'hello'字符串在页面上显示出来，如下图

Vue中的$event详解相关推荐

vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
在vue中引入css,详解在Vue中有条件地使用CSS类
详解在Vue中有条件地使用CSS类 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了详解在Vue中有条件地使用CSS类,编程之家小编觉得挺不 ...
function(event)中的event详解
目录: 一.function(event)中的event是什么? 二.为什么要加上function(event)中的event? 三.如果需要引入别的参数,那要怎么获取function(event)中 ...
Vue中$refs 使用详解
js中想要获取dom节点一般用document.querySelecto('.input'),然后获取input的值. 在vue中绑定ref就不需要在获取dom节点了,直接绑定在input上,然后 $ ...
php watcher,vue 中的 watcher详解
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher .这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化.当你想要在数据变化响应时,执行异步操作或开 ...
Vue中的v-slot详解，作用域插槽和具名插槽
1.具名插槽有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
JavaScript中Window.event详解
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...
vue中watch的详解
Watch概述一个对象,键是需要观察的表达式,值是对应回调函数.值也可以是方法名,或者包含选项的对象.Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性. ...
关于Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...

Vue中的$event详解

场景1：获取原生DOM事件的事件对象

场景2：事件注册所传的参数(子组件向父组件传值)

Vue中的$event详解相关推荐

最新文章

热门文章