Vue关于自定义事件的$event传参问题
作者：彭恒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
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。