vue app添加多个listen

在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应用程序中添加多个事件监听器有多种方法,可以根据具体情况选择最适合的方法。