vue获取事件对象以及传递自定义参数的方法

背景

在某些场景下，我们想获取vue自定义的事件对象，处理一些业务场景，同时还想传入一些自定义参数。vue对此已经声明了一个默认参数，专门作为子组件传给父组件的默认值。点击，进入传送门

通过官方代码示例，我们可以看出从子组件传出的默认值，在父组件里通过$event这个变量来接收的。$event并不一定是事件对象，他是子组件传给父组件的参数。在一些ui组件库中，有些组件就是通过$event变量来接收子组件的事件对象。例如vant-ui的checkbox的自定义click事件，他的组件声明里，就是通过this.$emit('click', event),将事件对象传出。

可以看下他的源码实现：这个vant 2.0 以下的版本

解释清楚之后，我们回归正题，当我们既要获取子组件传给父组件的默认参数，又想添加我们自己的参数，我们应该怎么做呢？

在父组件直接通过$event 来接收，自定义参数放在$event之后即可,我拿业务场景实际的代码举例：

 van-checkbox(
                v-for="(item,index) in list"
                :key="index"
                @click="toggleCurrent($event, index)"
                :name="index")

通过这种方式，我们即获取子组件传递给父组件的参数，又可以根据业务场景自己传入自己定义的参数。

toggleCurrent(e, index) {
            // 取消勾选时弹出
            if (
                !this.result.includes(index) &&
                (e.target.nodeName === 'IMG' || e.target.nodeName === 'p')
            ) {
                // 取消勾选
                if (index === 2) {
                    this.showAML = true
                } else if ([0, 2].indexOf(index) === -1) {
                    this.showContactCustomer = true
                }
            }
        },