面试题：在 Vue 组件中如何访问根实例？

在 Vue 组件中，可以通过以下几种方式访问根实例（即 Vue 应用的根组件）：

1. 通过 `$root` 属性

Vue 组件实例提供了一个 $root 属性，它指向当前组件树的根实例。如果当前组件是根组件，$root 就是它自己。

export default {
  mounted() {
    // 访问根实例
    console.log(this.$root);

    // 访问根实例的数据
    console.log(this.$root.someData);

    // 调用根实例的方法
    this.$root.someMethod();
  }
};

注意：$root 虽然方便，但在大型项目中过度使用会导致组件与根实例耦合过紧，不利于维护。

2. 通过 `$parent` 递归向上查找

如果组件嵌套较深，可以通过 $parent 属性递归向上查找，直到找到根实例。

export default {
  methods: {
    getRootInstance(component) {
      if (component.$parent) {
        return this.getRootInstance(component.$parent);
      }
      return component;
    }
  },
  mounted() {
    const root = this.getRootInstance(this);
    console.log(root);
  }
};

注意：这种方式依赖于组件层级结构，如果组件结构发生变化，可能会导致问题。

3. 通过全局事件总线（Event Bus）

可以通过创建一个全局的事件总线（Event Bus）来间接访问根实例的数据或方法。

// 在 main.js 中创建 Event Bus
export const eventBus = new Vue();

// 在根实例中注册数据或方法
new Vue({
  data() {
    return {
      someData: '根实例的数据'
    };
  },
  methods: {
    someMethod() {
      console.log('根实例的方法');
    }
  },
  created() {
    eventBus.$on('get-root-data', (callback) => {
      callback(this.someData);
    });
  }
}).$mount('#app');

// 在子组件中通过 Event Bus 访问根实例
import { eventBus } from './main.js';

export default {
  mounted() {
    eventBus.$emit('get-root-data', (data) => {
      console.log(data); // 输出：根实例的数据
    });
  }
};

注意：事件总线适合跨组件通信，但过度使用会导致代码难以维护。

4. 通过 Vuex 状态管理

如果根实例的数据或方法需要被多个组件共享，推荐使用 Vuex 来管理全局状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    someData: '根实例的数据'
  },
  mutations: {
    someMethod(state) {
      console.log('根实例的方法');
    }
  }
});

// main.js
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

// 在子组件中访问 Vuex 状态
export default {
  mounted() {
    console.log(this.$store.state.someData); // 输出：根实例的数据
    this.$store.commit('someMethod'); // 调用根实例的方法
  }
};

注意：Vuex 适合管理复杂的全局状态，但如果是简单的场景，使用 Vuex 可能会显得过于繁琐。

5. 通过 `provide/inject`

Vue 提供了 provide 和 inject 机制，允许祖先组件向所有子孙组件注入依赖。

// 根组件
export default {
  provide() {
    return {
      rootInstance: this
    };
  },
  data() {
    return {
      someData: '根实例的数据'
    };
  },
  methods: {
    someMethod() {
      console.log('根实例的方法');
    }
  }
};

// 子组件
export default {
  inject: ['rootInstance'],
  mounted() {
    console.log(this.rootInstance.someData); // 输出：根实例的数据
    this.rootInstance.someMethod(); // 调用根实例的方法
  }
};

注意：provide/inject 适合深层嵌套的组件通信，但会使组件与根实例的依赖关系变得不透明。