Vue关于自定义事件的$event传参问题

更新时间：2023年10月21日 08:35:55 作者：彭恒0714

这篇文章主要介绍了Vue关于自定义事件的$event传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue自定义事件的$event传参

1.$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。

2.在原生事件中，$event是事件对象，在自定义事件中，$event是传递过来的数据（参数）

如果遇到子组件向父组件传数据，需要用到自定义事件来处理，此时我们在父组件上监听那个自定义事件，并且需要接收子组件传过来的参数，同时我们自己还想传递一个参数给下面方法

父组件

父组件监听自定义事件的定义的方法

此时上面的那个$event不再是原生的事件对象e，而是用来接收子组件传递过来的数据（参数）

vue事件参数$event

$event是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数

原生事件

在原生事件中表现和默认的事件对象相同

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

自定义事件

在自定义事件中表现为捕获从子组件抛出的值

my-item.vue :

export default {
    methods: {
        customEvent() {
            this.$emit( custom-event ,  some value )
        }
    }
}

App.vue

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
            </my-list>
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) //  some value
        }
    }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现搜索小功能
这篇文章主要为大家详细介绍了vue实现搜索小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
vue项目部署到nginx/tomcat服务器的实现
这篇文章主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
前端Vue select下拉框使用以及监听事件详解
由于前端项目使用的是Vue.js和bootstrap整合开发,中间用到了select下拉框,这篇文章主要给大家介绍了关于前端Vue select下拉框使用以及监听事件的相关资料,需要的朋友可以参考下
2024-03-03
如何在vue中更优雅的封装第三方组件详解
在封装第三方组件中,经常会遇到一个问题,下面这篇文章主要给大家介绍了关于如何在vue中更优雅的封装第三方组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
vue-router 学习快速入门
本篇文章主要介绍了vue-router 学习快速入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
vue中的过滤器及其时间格式化问题
这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
vue实现同时设置多个倒计时
这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
Vue3实现简约型侧边栏的示例代码
本文主要介绍了Vue3实现简约型侧边栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程
这篇文章主要介绍了Vite+Vue3+TypeScript 搭建开发脚手架的详细过程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-02-02
Vue Router之router.push和router.resolve页面跳转方式
这篇文章主要介绍了Vue Router之router.push和router.resolve页面跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04