vue中的事件是什么
- 绑定事件用v-on,简写@
- v-on指令的参数是事件名(原生或者自定义),值是事件处理器
- 有原生事件(click)和自定义事件(myEvent)
- 在组件上使用原生事件,需要加native修饰符
自定义事件
- 需要使用emit方法,emit(‘事件名’,参数)
- 自定义事件名的规范(script中用小驼峰,模板中用短横线)
emit('eventName')
<Son @event-name="handler">
----------------------------------------------------------------
1、组合api中
setup(props, {emit}) {const clickHandler = () => {emit('xxx', data)}
}
2、setup语法糖中(非TS)
const emits = defineEmits(['xxx1', 'xxx2'])
3、setup语法糖中(使用TS)
const emit = defineEmits<{(e: 'xxx1', msg: String): void,(e: 'xxx2', num: Number): void,
}>()
emit('xxx1', 'jim')
事件处理器中的参数
- 原生事件的事件处理器中的参数
// 方法事件处理器没有显示的传\$event,但在方法中仍然可以获取事件对象
<div @click="handler">
handler(e) {// e为事件对象
}
// 内联事件处理器中,如果方法要额外传参数,需要显示写出\$event(表明这个参数的位置,便于区分参数)
<div @click="handler($event, 123)">
handler(e, msg) {// e为事件对象,msg是123
}
- 自定义事件的事件处理器中的参数
// 方法事件处理器没有显示的传\$event,但在方法中仍然可以获取自定义事件传递的参数
<div @eventName="handler">
handler(eventData) {// eventData为自定义事件传递的参数
}
// 内联事件处理器中,如果方法要额外传参数,需要显示写出\$event(表明这个参数的位置,便于区分参数)
<Son @eventName="handler(123, $event)" />
handler(msg, eventData) {// msg是123,eventData为自定义事件传递的参数
}
on和emit的实现
o n 、 on、 on、emit是基于订阅观察者模式的,维护一个事件中心,on的时候将事件按名称存在事件中心里,称之为订阅者,然后emit将对应的事件进行发布,去执行事件中心里的对应的监听器
1、vue先创建一个构造器,维护一个事件中心events
function EventEmiter(){this.events = {}
}
2、$on
EventEmiter.prototype.on = function(event,cb){if(this.events[event]){this.events[event].push(cb)}else{this.events[event] = [cb]}
}
3、$emit
EventEmiter.prototype.emit = function(event){let args = Array.from(arguments).slice(1)let cbs = this.events[event]if(cbs){cbs.forEach(cb=>{cb.apply(this,args)})}
}