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
        }
    }
}

总结

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

您可能感兴趣的文章:

Element中使用ECharts的项目实践
本文主要介绍了Element中使用ECharts的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
Vue的土著指令和自定义指令实例详解
这篇文章主要介绍了Vue的土著指令和自定义指令的用法讲解 ,需要的朋友可以参考下
2018-02-02
Vue3从0搭建Monorepo项目组件库
这篇文章主要为大家介绍了Vue3从0搭建Monorepo项目组件库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
nuxt引入组件和公共样式的操作
这篇文章主要介绍了nuxt引入组件和公共样式的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue3如何理解ref toRef和toRefs的区别
本文主要介绍了Vue3如何理解ref toRef和toRefs的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
前端Vue组件开发中枚举值验证的最佳实践
在 Vue 3中,枚举值验证（Enum-like validation）是提升组件健壮性的重要手段,本文将和大家详细介绍一下具体的实现方法,感兴趣的小伙伴可以了解下
2026-04-04
Vue中路由参数与查询参数传递对比解析
在Vue.js中，路由与导航不仅涉及页面切换，还包括了向页面传递参数和获取查询参数，这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下
2023-08-08
vue el-date-picker 开始日期不能大于结束日期的实现代码
这篇文章主要介绍了vue el-date-picker 开始日期不能大于结束日期的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
vue动态的 BreadCrumb 组件el-breadcrumb ElementUI详解
这篇文章主要介绍了vue如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI
,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
2024-07-07
Vue.js中的全局错误处理函数errorHandler用法
这篇文章主要介绍了Vue.js中的全局错误处理函数errorHandler用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06