在 Vue 应用中，有时我们需要同时监听多个事件，以便在不同情况下执行相应的操作。可以使用 `v-on` 或简写形式 `@` 来添加监听器，同时使用多个监听器可以更灵活地处理不同场景下的交互。比如，在输入框中监听输入事件和焦点变化事件，以便在用户输入时进行相应的处理，并在焦点变化时执行其他操作。通过合理使用多个监听器，可以更好地满足不同场景下的需求，提高应用的灵活性和可扩展性。
在Vue应用程序中，我们可通过Vue实例的$on()方法来添加事件监听器。但是，如果我们需要添加多个事件监听器，我们该如何做呢?本文将介绍如何在Vue应用程序中添加多个事件监听器。
Vue实例的$on()方法可以用于监听自定义事件。语法如下
```
vm.$on(event, callback)
```
其中，event是事件名称，callback是事件回调函数。当事件被触发时，回调函数将被调用。例如
```
this.$on('customEvent', function() {
console.log('custom event triggered');
});
```
这样，当customEvent事件被触发时，控制台将输出“custom event triggered”。
如果我们需要添加多个事件监听器，可以使用Vue实例的$on()方法多次调用。例如
```
this.$on('customEvent1', function() {
console.log('custom event 1 triggered');
});
this.$on('customEvent2', function() {
console.log('custom event 2 triggered');
});
```
这样，当customEvent1事件被触发时，控制台将输出“custom event 1 triggered”，当customEvent2事件被触发时，控制台将输出“custom event 2 triggered”。
除了使用Vue实例的$on()方法，我们还可以使用Vue组件的$on()方法来添加事件监听器。例如
```
this.$parent.$on('customEvent', function() {
console.log('custom event triggered');
});
```
这样，当customEvent事件被触发时，回调函数将被调用。
在Vue应用程序中，我们还可以使用事件总线来添加多个事件监听器。事件总线是一个全局的Vue实例，可以用于在不同的组件之间传递事件。我们可在main.js文件中创建一个事件总线，然后在任何组件中使用它。例如
```
// main.js
import Vue from 'vue'
export const eventBus = new Vue()
// App.vue
import { eventBus } from './main.js'
export default {
mounted() {
eventBus.$on('customEvent1', function() {
console.log('custom event 1 triggered');
});
eventBus.$on('customEvent2', function() {
console.log('custom event 2 triggered');
});
}
}
```
这样，当customEvent1事件被触发时，控制台将输出“custom event 1 triggered”，当customEvent2事件被触发时，控制台将输出“custom event 2 triggered”。
总的来说，在Vue应用程序中添加多个事件监听器有多种方法，能够依据具体情况选择最适合的方法。