Vue3如何查看所有全局注册组件？this.$options.components为空

Vue 3 中组件实例的 this.$options.components 仅会收集当前组件局部注册的组件，通过 app.component() 注册的全局组件不会挂载到这个属性下，因此打印得到空对象是框架的默认行为，不是组件注册失效。

全局注册的组件统一存储在应用实例的上下文中，可通过以下两种方式获取：

• 组件内部访问
  在组件的生命周期钩子、方法中，直接通过实例属性读取全局组件集合即可：

  mounted() {
    // 该对象包含所有全局注册的组件，键为注册时的组件名，值为组件配置对象
    const allGlobalComponents = this.$.appContext.components
    console.log(allGlobalComponents)
    // 你注册的UserTextInput可通过 allGlobalComponents.UserTextInput 直接获取
  }
  

• 入口文件处访问
  如果你在 main.js 等应用入口持有创建好的app实例，也可以直接读取上下文拿到全局组件列表：

  import UserTextInput from "./components/defaultComponents/UserTextInput.vue";
  
  const app = createApp(App);
  app.component('UserTextInput', UserTextInput);
  // 打印所有全局注册组件
  console.log(app._context.components)
  app.mount('#app');
  

提示：app._context 属于框架内部属性，跨版本使用时建议做兼容性校验，日常业务开发优先使用组件内 this.$.appContext.components 的访问方式，该路径在Vue 3全版本中稳定可用。

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