Vue3 如何查看挂载在 vue 上的 全局组件

使用app.component 查看

[1]你可以通过全局 API app.component 注册全局组件并查看。在 Vue 3 中，你可以通过以下方式来查看挂载在 app 上的全局组件：

const app = createApp({});

// 全局注册组件
app.component('my-component', {
  /* ... */
});

// 检查全局组件是否已经注册
console.log(app.component('my-component'));

以上代码中，使用 app.component 方法注册一个名为 my-component 的全局组件，并通过 console.log 查看相关组件的注册情况。如果返回 undefined 则表示该组件未注册。

使用 Vue Devtools 查看

1. 打开 Vue Devtools 并选择你的应用程序实例。
2. 在 Devtools 的顶部栏中选择“组件”选项卡。
3. 在左侧面板中选择第二个选项卡 “Global”。
4. 现在你应该可以看到注册在你的 app 实例上的所有全局组件了。

打印 app 实例查看

控制台打印app._context.components查看。
其中 app._context 包含了 app 实例中的所有内容，包括注册的组件、指令、混入等，并且 app._context.components 返回一个对象，其中包含了已经注册的所有组件。