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