$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

原文地址:https://www.cnblogs.com/wuqilang/p/15190963.html