vue中的事件

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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---

事件处理器中的参数

• 原生事件的事件处理器中的参数

// 方法事件处理器没有显示的传\$event，但在方法中仍然可以获取事件对象
<div @click="handler">
handler(e) {
	// e为事件对象
}
// 内联事件处理器中，如果方法要额外传参数，需要显示写出\$event(表明这个参数的位置，便于区分参数)
<div @click="handler($event, 123)">
handler(e, msg) {
	// e为事件对象，msg是123
}
1
2
3
4
5
6
7
8
9
10

• 自定义事件的事件处理器中的参数

// 方法事件处理器没有显示的传\$event，但在方法中仍然可以获取自定义事件传递的参数
<div @eventName="handler">
handler(eventData) {
	// eventData为自定义事件传递的参数
}
// 内联事件处理器中，如果方法要额外传参数，需要显示写出\$event(表明这个参数的位置，便于区分参数)
<Son @eventName="handler(123, $event)" />
handler(msg, eventData) {
	// msg是123，eventData为自定义事件传递的参数
}
1
2
3
4
5
6
7
8
9
10

on和emit的实现

$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)
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22