vue的艾特功能实现

Vue 中的 @ 功能实现

Vue 中的 @ 符号是 v-on 指令的简写，用于绑定事件监听器。以下是具体实现方式：

基本语法

<button @click="handleClick">点击触发事件</button>

methods: {
  handleClick() {
    console.log('按钮被点击');
  }
}

传递参数

<button @click="handleClick('参数')">带参数的事件</button>

methods: {
  handleClick(param) {
    console.log('接收到的参数:', param);
  }
}

访问原生事件对象

<button @click="handleEvent($event)">访问事件对象</button>

methods: {
  handleEvent(event) {
    console.log('事件对象:', event);
  }
}

事件修饰符

<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>

<!-- 停止事件冒泡 -->
<div @click.stop="doThis"></div>

<!-- 按键修饰符 -->
<input @keyup.enter="submit" />

动态事件名

<button @[eventName]="handler">动态事件</button>

data() {
  return {
    eventName: 'click'
  }
}

对象语法

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

注意事项

• @ 是 v-on 的语法糖，两者功能完全等价
• 事件处理函数应定义在 methods 选项中
• 修饰符可以串联使用，如 @click.stop.prevent
• 对于自定义组件，@ 会监听子组件触发的自定义事件