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)
})
}
}