vue3 弹窗组件没有注册，为什么可以直接使用？

Question

定义在components文件下的子组件

<template>  <van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup></template><script>import { defineComponent, ref } from 'vue'export default defineComponent({  // eslint-disable-next-line vue/multi-word-component-names  name: 'Login',  setup() {    const show = ref(true)    return {      show    }  }})</script>

然后在views文件夹中，直接使用,并没有import引入，也没有注册在components中为什么可以直接使用
？

<template>  <div class="home">    <Login></Login>  </div></template><script>import { defineComponent, onMounted, ref } from 'vue'export default defineComponent({  name: 'Home',  components: {},  setup() {}})

Answer 1

如果是自定义组件，你没有在当前使用该组件的组件引入（Vue3组件内引入组件不需要注册），那肯定是全局引入了，你全局搜索文件名，看看哪些文件内出现了，大概就可以找到问题所在了。

Answer 2

全局搜索 Login (假设这是你的子组件文件名)

Answer 3

Vue3 社区有一个 unjs 的团队，里面有一堆自动引入处理的工具。比如说自动引入组件的 unimport，可以看看你的项目是否有使用。

当然也有可能你们在 main.js 中使用 app.component() 全局注册了组件 �� #全局注册 - 组件注册 | Vue.js

Answer 4

首先，需要理解 Vue 3 中的组件注册机制。在 Vue 3 中，组件可以在全局范围内注册，也可以在局部范围内注册。

如果你在 components 文件夹中定义了一个组件，那么这个组件默认会在全局范围内注册。这意味着你可以在应用的任何地方直接使用这个组件，而无需再次导入或注册。

在你的示例中，你定义的 Login 组件位于 components 文件夹中，因此它已经在全局范围内注册。因此，你可以在 views 文件夹中的 Home 组件模板中直接使用 <Login></Login>，而无需再次导入或注册。

另外，需要注意的是，虽然你的 Login 组件定义中包含了 import { defineComponent, ref } from 'vue'，但这并不意味着你必须在其他地方再次导入或注册这个组件。这个导入语句是在 Login 组件的定义中使用的，而不是在 Home 组件中使用的。

总结一下，你的 Login 组件之所以可以直接在 Home 组件中使用，是因为它已经在全局范围内注册了。如果你想在局部范围内使用这个组件，你可以将它导入到需要使用的组件中，并在该组件的 components 选项中进行注册。