vue2 全局事件监听

Vue 2 中全局事件监听通常是在 Vue 实例创建之前或者使用 `beforeCreate` 或 `created` 生命周期钩子函数中设置的，这样可以确保在整个应用中都能接收到这些事件。你可以通过 `vue.$on` 方法来注册一个全局事件，然后通过 `vue.$emit` 来触发这个事件。

例如：

// 在 main.js 或者 setup 函数中
import { createApp } from 'vue';
const app = createApp(App);

app.config.globalProperties.$on('customEvent', (data) => {
  // 这里处理接收到的 customEvent 事件
  console.log(`Received data: ${data}`);
});

app.mount('#app');

// 在组件内部，可以触发这个全局事件
export default {
  methods: {
    emitCustomEvent(data) {
      this.$emit('customEvent', data);
    }
  }
};

当你需要在所有组件中监听某个特定的全局事件时，这种方式非常有效。然而，要注意全局事件可能会导致事件风暴，所以应该谨慎地设计和管理它们。

相关问题

vue3全局变量监听 页面刷新后全局变量消失

在Vue 3中，可以使用Vue的响应式系统来实现全局变量的监听。Vue 3中引入了一个新的API `reactive`，它可以将一个普通的JavaScript对象转换为响应式对象。通过将全局变量定义为一个响应式对象，就可以在页面刷新后保留全局变量的值。

下面是一个示例代码，演示了如何在Vue 3中实现全局变量的监听：

// main.js
import { createApp, reactive } from 'vue';

const globalState = reactive({
  count: 0,
});

const app = createApp(App);
app.config.globalProperties.$globalState = globalState;
app.mount('#app');

在上述代码中，我们创建了一个名为`globalState`的响应式对象，并将其定义为Vue应用的全局属性`$globalState`。这样，在整个应用中都可以通过`this.$globalState`来访问和修改全局变量。

然后，在组件中可以通过以下方式使用全局变量：

<template>
  <div>
    <p>Count: {{ $globalState.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$globalState.count++;
    },
  },
};
</script>

在上述代码中，我们通过`this.$globalState.count`来访问全局变量，并在按钮的点击事件中对其进行修改。

当页面刷新时，全局变量`$globalState`的值会被保留，因为它是在Vue应用的根实例中定义的。这样就可以实现全局变量的持久化。

vue2全局事件总线

在Vue.js中，全局事件总线是一种组件间通信的方式，通过它可以实现任意组件间的通信。在Vue2中，可以通过创建一个Vue实例作为全局事件总线来实现。首先，在创建Vue实例时，我们可以定义一个名为$bus的属性，并将其赋值为创建的Vue实例。这样，在整个应用程序中就可以通过访问Vue原型上的$bus属性来使用全局事件总线。

使用全局事件总线的步骤如下：
1. 在需要进行通信的组件中，通过$bus.$on方法来绑定自定义事件监听器。例如，组件A可以通过$bus.$on('customEvent', callback)来绑定一个名为'customEvent'的自定义事件，并指定一个回调函数callback来处理事件触发时的逻辑。
2. 在其他组件中，通过$bus.$emit方法来触发已绑定的自定义事件，并传递需要传递的数据。例如，组件C可以通过$bus.$emit('customEvent', data)来触发名为'customEvent'的自定义事件，并将数据data传递给该事件的监听器。
3. 组件A在绑定事件时定义的回调函数将会被执行，并且可以访问到传递的数据。通过在回调函数中处理数据，组件A可以实现与其他组件的通信。

通过以上步骤，我们可以使用全局事件总线实现Vue2中的组件间通信。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue2 中使用“全局事件总线“实现任意组件间通信](https://blog.csdn.net/weixin_52212950/article/details/128097375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]