vue的艾特功能实现
Vue 中的 @ 功能实现
在 Vue 中，@ 符号是 v-on 指令的简写，用于监听 DOM 事件并执行对应的 JavaScript 代码。以下是具体实现方式：
基本语法
<button @click="handleClick">点击我</button>等价于：
<button v-on:click="handleClick">点击我</button>方法定义
在 Vue 实例的 methods 选项中定义事件处理函数：
methods: {
handleClick() {
console.log('按钮被点击了');
}
}传递参数
可以直接在模板中传递参数给事件处理函数：
<button @click="handleClick('参数值')">带参数的点击</button>事件修饰符
Vue 提供了事件修饰符来实现常见的 DOM 事件处理需求：
<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>
<!-- 阻止事件冒泡 -->
<div @click.stop="doThis"></div>
<!-- 按键修饰符 -->
<input @keyup.enter="submit">原生事件绑定
如果要监听组件根元素的原生事件，需要使用 .native 修饰符：
<my-component @click.native="doSomething"></my-component>自定义事件
在组件中使用 $emit 触发自定义事件，父组件通过 @ 监听：
<!-- 子组件 -->
<button @click="$emit('custom-event', payload)">触发事件</button>
<!-- 父组件 -->
<child-component @custom-event="handleCustomEvent"></child-component>动态事件名
Vue 2.6.0+ 支持动态事件名：
<button @[eventName]="handleEvent">动态事件</button>data() {
return {
eventName: 'click'
}
}注意事项
- 事件处理函数中的
this自动绑定到 Vue 实例 - 可以使用
$event访问原生 DOM 事件 - 对于需要被动监听的事件，可以使用
.passive修饰符提升滚动性能
