Vue.js 2中使用总线模式修改父组件加载状态的问题排查

你的问题出在事件总线的订阅时机和this指向上：直接在script最外层写eventBus.$on的话，回调函数的上下文并不是Vue组件实例，自然找不到isLoading这个data属性。下面是具体的修复方案：

核心修复要点 #

• 把事件总线的订阅逻辑放到组件的**生命周期钩子（比如created）**里，确保回调函数的this指向当前Vue实例
• 用this.isLoading来修改状态，因为data里的属性都会挂载到组件实例上

修改后的完整主组件代码 #

<template>
  <div>
    <div class="globalLoader" v-if="isLoading">
      <GridLoader></GridLoader>
      <!--<p>Loading...</p>-->
    </div>
    <content-component></content-component>
  </div>
</template>
<script>
var GridLoader= require('vue-spinner/dist/vue-spinner.min').GridLoader;
var eventBus = require("./event-bus.js").EventBus;

var d = {
  components: {
    'content-component': ..., // 保留你原本的组件引入逻辑
    'GridLoader': GridLoader
  },
  data: function() {
    return { isLoading : false }
  },
  created() {
    // 将事件订阅移至created钩子内，确保上下文正确
    eventBus.$on('isLoadingChanged', (receivedLoading) => {
      // 通过this访问data中的isLoading属性
      this.isLoading = receivedLoading;
    });
  },
  beforeDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    eventBus.$off('isLoadingChanged');
  }
};
export default d;
</script>

额外注意事项 #

• 子组件触发事件时，要确保写法正确：eventBus.$emit('isLoadingChanged', true/false)，传递对应的布尔值来控制加载状态
• 一定要在组件销毁时用$off取消事件订阅，否则组件多次创建会累积重复监听，造成不必要的内存占用

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