Vue中能否通过v-on(@)同时绑定多个事件至同一函数？

首先明确：Vue不支持你尝试的<div @click:mouseover="someFunction"></div>这种用冒号分隔多个事件的语法——这里的click:mouseover会被解析成一个自定义事件名，而非同时绑定click和mouseover两个原生事件。

下面是几种可行的替代方案：

1. 直接重复绑定（最直观） #

虽然你想避免，但这种写法可读性最高，实现成本最低：

<div @click="someFunction" @mouseover="someFunction"></div>

2. 使用v-on的对象语法（推荐） #

Vue支持通过对象语法一次性绑定多个事件到同一函数，无需重复写函数名：

<!-- 完整v-on语法 -->
<div v-on="{ click: someFunction, mouseover: someFunction }"></div>

<!-- @缩写形式也支持 -->
<div @="{ click: someFunction, mouseover: someFunction }"></div>

对象的键是事件名，值是对应的处理函数，多个事件可以指向同一个函数。

3. 自定义指令（适合高频复用场景） #

如果你的项目中需要频繁给元素绑定多组重复事件，可以自定义一个指令来简化操作：

// Vue 3 全局注册指令
const app = createApp(App);
app.directive('multi-event', {
  mounted(el, binding) {
    const { events, handler } = binding.value;
    events.forEach(event => el.addEventListener(event, handler));
  },
  unmounted(el, binding) {
    const { events, handler } = binding.value;
    events.forEach(event => el.removeEventListener(event, handler));
  }
});

使用时只需传入事件数组和处理函数：

<div v-multi-event="{ events: ['click', 'mouseover'], handler: someFunction }"></div>

内容的提问来源于stack exchange，提问作者Pazulay