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

概念
- 在Vue 3.0中，$event是一个特殊的变量，它用于在事件处理函数中访问原生的DOM事件对象。这个变量主要在模板中的内联事件处理中使用，当一个事件被触发时（比如click、input等事件），$event就代表了这个事件对应的原生DOM事件。
使用场景和示例
- 基本事件处理
  - 例如，在一个简单的按钮点击事件中，如果想要访问鼠标点击事件的一些原生属性，如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>