【Vue】Vue3.0（二十一）Vue 3.0中 的$event使用示例

1. 概念
   • 在Vue 3.0中，$event是一个特殊的变量，它用于在事件处理函数中访问原生的DOM事件对象。这个变量主要在模板中的内联事件处理中使用，当一个事件被触发时（比如click、input等事件），$event就代表了这个事件对应的原生DOM事件。
2. 使用场景和示例
   • 基本事件处理
     • 例如，在一个简单的按钮点击事件中，如果想要访问鼠标点击事件的一些原生属性，如clientX和clientY（鼠标指针在浏览器可视区域中的水平和垂直坐标），可以使用$event。

<template>
  <button @click="handleClick">点击我</button>
</template>

<script setup>
const handleClick = (e) => {
  console.log('鼠标点击位置：', e.clientX, e.clientY);
};
</script>

在这个例子中，e就是$event，它被传递给handleClick函数，这样就可以在函数内部访问鼠标点击的原生事件对象的属性。

• 表单输入事件
  • 对于表单元素的事件处理，$event也很有用。比如在一个input框的input事件中，可以通过$event获取用户输入的最新值。

<template>
  <input type="text" @input="handleInput" />
</template>

<script setup>
const handleInput = (e) => {
  console.log('用户输入的内容：', e.target.value);
};
</script>

这里的e.target.value通过$event（也就是e）访问了input框中用户输入的最新文本内容。

• 自定义组件事件传递
  • 当在自定义组件中触发事件并传递数据时，$event可以用来接收传递的数据。假设一个自定义组件MyComponent会在某个操作后触发一个自定义事件custom - event并传递一个数据对象。

<template>
  <MyComponent @custom - event="handleCustomEvent" />
</template>

<script setup>
import MyComponent from './MyComponent.vue';
const handleCustomEvent = (data) => {
  console.log('接收到自定义组件传递的数据：', data);
};
</script>

在这种情况下，data就是$event，它包含了自定义组件通过$emit传递的数据。

需要注意的是，在使用$event时，要确保事件处理函数的参数顺序和类型与实际需求相符，以便正确地获取和使用事件相关的信息。