一、事件对象

在vue中，事件的回调函数在定义时不写括号，默认的参数是事件对象

    <el-button @click="handleClick">子组件按钮</el-button>
    
    
    handleClick(e) {
      console.log(e)
    }

如果写了括号，不传参，那么打印结果为undefined

    <el-button @click="handleClick()">子组件按钮</el-button>

括号中传入$event，则参数为事件对象

    <el-button @click="handleClick($event)">子组件按钮</el-button>

以上，handleClick和handleClick($event)的效果是一样的，那什么时候需要传$event呢？

当既需要事件对象，又需要其他参数时，$event的作用就出来了

    <ul>
      <li v-for="n in 5" :key="n">
        <el-button @click="handleClick($event, n)">子组件按钮</el-button>
      </li>
    </ul>
    
    handleClick(e, n) {
      console.log(e, n)
    }

效果：

如果不用$event，使用箭头函数也是可以的，一样的效果：

        <el-button @click="e => handleClick(e, n)">子组件按钮</el-button>

二、子组件通过$emit触发父组件的事件，传递过来的参数，通过$event接收

子组件：

    <el-button @click="$emit('btn', 100, 200)">子组件按钮</el-button>

父组件：

    <Btn @btn="handleBtn" />
    <Btn @btn="handleBtn($event)" />

当handleBtn不写括号时，接收到全部参数，当写成handleBtn($event)时，接收到第一个参数

乍一看好像没什么用呢，但是既需要子组件传来的参数，又需要当前下标，就需要用到了：

    <ul>
      <li v-for="n in 5" :key="n">
        <Btn @btn="handleBtn($event, n)" />
      </li>
    </ul>

注意：$event只能接收第一个参数

如果说不用$event，也可以写成这样：

    <Btn @btn="(...rest) => handleBtn(...rest, n)" />