Vue事件中的$event对象

一般会在两种情况下使用$event参数。

一、DOM事件回调

v-on指令监听dom事件的时候不需要写$event，回调函数会默认接收该参数。（形参不一定要写e，写什么都可以）

如果sliderMove传了指定的参数a，那么就会接收a。 如果既想接收事件对象，又想接收a，要写成@mousedown="sliderMove($event, a)"。

<template>  
    <div ref="bar" :style="barCSS" class="bar" @mousedown="sliderMove"></div>
</template>
    
<script> 
export default {  
    methods: {    
        sliderMove(e) {      
            console.log('🚀 ~ file: ScaleSlider.vue ~ line 69 ~ sliderMove ~ e'``, e);    
        }  
    }
}
</script>

二、子组件向父组件传值

一般父子组件是这样传参的

// child.vue
editPicture(task) {
    this.$emit('showEditModal', task);
}

// parent.vue
<check-card @showEditModal="openEdit"></check-card> 

openEdit(task) {    
    console.log(task); // task
}

如果想在openEdit传parent自己参数，就需要写成这样

// parent.vue
<check-card @showEditModal="openEdit($event, index)"></check-card>

openEdit(task, index) {
    console.log(task, index); // task, index
}

如果子组件不止传一个参数呢？$event只能收到第一个参数task。

// child.vue
editPicture(task, picindex) {
    this.$emit('showEditModal', task, picindex);
}

// parent.vue
<check-card @showEditModal="openEdit($event, index)"></check-card>

openEdit(e, index) {
    console.log(e, index);  // task, index而不是picindex
}

想要在父组件传自己参数的情况下，接收多个子组件的参数，需要将子组件的参数变为对象。

// child.vue
editPicture(task, picindex) {
    this.$emit('showEditModal', { task, picindex });
}

// parent.vue
<check-card @showEditModal="openEdit($event, index)"></check-card>

openEdit(e, index) {
    console.log(e, index);  // { task, picindex }, index
}