$event的使用场景

1、作为事件对象【原生事件】

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

  methods: {
    handleClick(e) {
      console.log('事件对象', e)
    }
  }

　　事件函数如果不写括号，默认参数为事件对象e

　　如果写了括号，需要获取事件对象e必须要传入$event

 

2、子组件中通过$emit触发父组件的事件，传过来的参数，通过$event接收【自定义事件】

Btn组件：

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

使用：

    <Btn @btn='handelBtn'></Btn>
    <Btn @btn='handelBtn($event)'></Btn>

效果：

　　

　　事件函数如果不写括号，默认接收全部参数

　　如果写了括号，还需要接收到子组件的参数，必须要传入$event，并且$event只会接收到子组件传来的第一个参数（子组件那边如果有多个参数最好以对象的形式传到父组件）

 

v-model语法糖：

    <MyInput v-model="name"></MyInput>
    <MyInput :value='name' @input='name=$event'></MyInput>

　　v-mode='name' 是 :value='name' @input='name=$event' 的语法糖，这里的$event就是子组件中$emit('input', val)传来的val