Vue中使用的EventBus有生命周期

在Vue中使用的EventBus是一种事件传递机制，也是Vue中的一个全局事件中心，它可以用于组件间发送消息、传递数据等操作。EventBus对象没有特定的生命周期，但是我们在Vue中使用EventBus时，需要注意一些生命周期相关的问题，下面是具体的攻略：

1. 创建EventBus

在Vue中创建一个EventBus非常容易，只需要在main.js中导入EventBus，并作为Vue实例的属性进行挂载即可。在创建EventBus时，我们建议在Vue实例的beforeCreate生命周期中创建，并将其挂载到Vue原型中，使其成为Vue全局共享的事件中心。

// main.js中创建EventBus
import Vue from 'vue';

export const EventBus = new Vue();

new Vue({
  el: '#app',
  // 在Vue实例的beforeCreate生命周期中创建EventBus，并将其挂载到Vue原型中
  beforeCreate() {
    Vue.prototype.$bus = EventBus;
  },
  ...
});

2. 发送事件

在组件中使用EventBus发送事件也非常容易，只需通过$emit方法发出一个事件通知即可：

// 组件中发送事件
this.$bus.$emit('event-name', eventData);

其中，'event-name'为事件名称，eventData为事件携带的数据。

3. 监听事件

组件中也可以监听EventBus对象发出的事件。在组件中使用$on方法监听事件，当EventBus对象发出这个事件时，组件将会执行对应的事件处理函数。

// 组件中监听事件
this.$bus.$on('event-name', (eventData) => {
  // 处理事件数据
  ...
});

4. 解除事件

在Vue的组件中使用监听事件的时候，需要在组件销毁的时候解除对该事件的监听，否则在页面切换等操作的时候可能会触发已经销毁的组件的事件监听器，引起一定的隐患。

beforeDestroy() {
  // 在组件销毁前解除事件监听
  this.$bus.$off('event-name');
}

示例1

组件1发送事件，组件2接收事件并处理

// 组件1
<template>
  <div>
    <button @click="sendEvent">发送事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      this.$bus.$emit('event-name', 'example data');
    },
  },
};
</script>

// 组件2
<template>
  <div>
    <p>接收到的数据：{{ eventData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventData: '',
    };
  },
  created() {
    this.$bus.$on('event-name', (eventData) => {
      this.eventData = eventData;
    });
  },
  beforeDestroy() {
    this.$bus.$off('event-name');
  },
};
</script>

示例2

使用EventBus实现异步组件的加载

// 在App.vue中定义异步组件的加载事件
<template>
  <div id="app">
    <button @click="loadAsyncComponent">加载异步组件</button>
    <async-component v-if="isAsyncComponentLoaded" />
  </div>
</template>

<script>
import { EventBus } from './main';
import AsyncComponent from './components/AsyncComponent';

export default {
  data() {
    return {
      isAsyncComponentLoaded: false,
    };
  },
  methods: {
    loadAsyncComponent() {
      EventBus.$emit('load-async-component', (asyncComp) => {
        this.isAsyncComponentLoaded = true;
      });
    },
  },
  components: {
    AsyncComponent,
  },
};
</script>

// 在异步组件中监听加载事件
<template>
  <div>
    异步组件加载成功！
  </div>
</template>

<script>
import { EventBus } from '../main';

export default {
  created() {
    EventBus.$on('load-async-component', (callback) => {
      import('./AsyncComponent').then(asyncComp => {
        callback(asyncComp);
      });
    });
  },
  beforeDestroy() {
    this.$bus.$off('load-async-component');
  },
};
</script>

在这个示例中，我们在App.vue组件中定义了一个异步组件的加载事件，当用户点击“加载异步组件”按钮时，我们通过$emit方法将这个加载事件发送给EventBus对象，同时传入一个回调函数callback。在异步组件中，我们通过$on方法监听这个事件，当事件被触发时，异步组件将通过import先加载异步组件，在异步组件加载完成后，我们执行回调函数，并通过传递异步组件的引用给App.vue组件，从而实现了异步组件的加载。

阅读剩余 71%