事件参数$event

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

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

<template>
    <div>
        <input type="text" @blur="blurHandler('hello', $event)" />
    </div>
</template>
复制代码
export default {
    
    
    methods: {
    
    
        blurHandler(msg, e) {
    
    
            console.log(e.target.value)
        }
    }
}

在这里插入图片描述
2.自定义事件

my-item.vue :
export default {
    
    
    methods: {
    
    
        customEvent() {
    
    
            this.$emit('custom-event', '周冬雨')
        }
    }
}
复制代码
App.vue
<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)" :key="index">
            </my-item>
    </div>
</template>
复制代码
export default {
    
    
    methods: {
    
    
        customEvent(index, e) {
    
    
            console.log(e) // '周冬雨'
        }
    }
}

猜你喜欢

转载自blog.csdn.net/qq_42931285/article/details/124396016