【vue3】09. 跟着官网学习vue3-事件处理

每日鸡汤：所有真实的快乐，都来自很久的努力

目录

前言

一、注意事项

1. click方法绑定函数名

总结

---

前言

本篇对应官网【事件处理】

---

一、注意事项

1. click方法绑定函数名

需要注意的是，绑定click方法绑定函数名的时候，传入的参数是MouseEvent

<template>
	<div @click="onclick">点击</div>
</template>
<script lang="ts" setup>
function onclick(e: MouseEvent) {
	console.log(e) // 这个是mouse event
}
</script>

所以，在你的onclick函数是一个有一个参数的公共的函数的时候，在绑定点击事件的时候在模版上要把onclick()的括号写上，要不然就悲剧了，我遇到过这个错误

<template>
	<!--点击 打印出来的是mouseevent-->
	<!--只写方法名造成的悲剧-->
	<div @click="onclick">点击</div>
</template>
<script lang="ts" setup>
function onclick(type?: string) {
	console.log(type)
	//假设 type 有其他用途
}

onclick('name') // 第一次调用这个方法会打印出 name
</script>

所以应该这样写，就没问题了【这也就是官网说的在内联事件处理器中调用方法，这允许我们向方法传入自定义参数以代替原生事件】

2. 特殊的$event变量

请记住这个特殊的变量$event，它可以直接在模版中使用，就像其他的的$emit方法一样，详情见

当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

---

总结