开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
在 Vue 开发中，组件化是核心思想之一，而组件的注册方式直接决定了它的使用范围。很多新手容易混淆全局组件和局部组件，不清楚两者的区别、注册方式以及适用场景。本文将用通俗易懂的方式，带你彻底搞懂全局组件与局部组件，写出更规范、高效的 Vue 代码。
一、什么是全局组件？
全局组件，顾名思义，是在整个 Vue 应用中都可以使用的组件。
一旦注册，无需重复引入，在任意组件的模板中都能直接调用，包括根组件、子组件、孙子组件等，适用范围是整个项目。
全局组件特点
- 注册一次，全项目可用
- 不用在单个组件中重复引入和注册
- 适合高频使用、通用性强的组件（如按钮、弹窗、导航、布局容器）
二、什么是局部组件？
局部组件，是只在当前注册它的父组件内部可用的组件。
它的作用域被限制在父组件中，出了这个组件就无法使用，是按需注册、按需使用的方式。
局部组件特点
- 只在注册它的组件内有效
- 避免全局污染，减少不必要的内存占用
- 适合业务专属、低频使用的组件（如某个页面的专属表单、列表）
三、全局组件与局部组件的注册方式（Vue2 / Vue3 对比）
Vue2 和 Vue3 的组件注册语法略有差异，下面分别说明。
1. 全局组件注册方式
Vue2 全局注册
使用
Vue.component() 进行全局注册，一般在 main.js 中完成：javascript
运行
// main.js
import Vue from 'vue'
import App from './App.vue'
// 引入全局组件
import GlobalButton from './components/GlobalButton.vue'
// 全局注册组件
Vue.component('GlobalButton', GlobalButton)
new Vue({
render: h => h(App)
}).$mount('#app')
Vue3 全局注册
Vue3 使用
createApp 创建实例，通过 app.component() 注册：javascript
运行
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import GlobalButton from './components/GlobalButton.vue'
const app = createApp(App)
// 全局注册
app.component('GlobalButton', GlobalButton)
app.mount('#app')
全局组件使用
注册完成后，任何组件模板中直接使用标签即可：
vue
<template>
<div>
<GlobalButton />
</div>
</template>
2. 局部组件注册方式
局部组件不需要在 main.js 中注册，而是在使用它的父组件内部引入并注册。
Vue2 / Vue3 局部注册（选项式 API）
vue
<template>
<div>
<LocalTable />
</div>
</template>
<script>
// 1. 引入局部组件
import LocalTable from './LocalTable.vue'
export default {
// 2. 局部注册
components: {
LocalTable
}
}
</script>
Vue3 组合式 API（<script setup>）
在
<script setup> 中引入即注册，无需额外声明：vue
<template>
<LocalTable />
</template>
<script setup>
// 直接引入，自动注册为局部组件
import LocalTable from './LocalTable.vue'
</script>
这是 Vue3 最推荐、最简洁的写法。
四、全局组件 vs 局部组件：核心区别对比
表格
| 对比点 | 全局组件 | 局部组件 |
|---|---|---|
| 作用范围 | 整个应用所有组件均可使用 | 仅当前注册的父组件内可用 |
| 注册位置 | main.js/ 入口文件 | 单个组件内部 |
| 使用方式 | 注册后直接用标签 | 需引入 + 注册才能使用 |
| 内存占用 | 应用启动就加载，一直存在 | 用到时才加载，用完可销毁 |
| 全局污染 | 过多会造成命名冲突、打包体积变大 | 无全局污染，更安全 |
| 适用场景 | 公共组件：Button、Layout、Modal 等 | 业务组件：页面专属模块 |
五、实际开发中如何选择？
优先使用局部组件的情况
- 组件只在一两个页面使用
- 业务性强、通用性低
- 为了减少全局污染、优化打包体积
适合注册为全局组件的情况
- 项目中大量复用的基础组件
- UI 框架自带组件（如 Element Plus、Ant Design Vue 全局注册）
- 全局布局、导航、底部栏等
六、总结
- 全局组件：一次注册，全项目可用，适合公共基础组件。
- 局部组件：按需引入、按需使用，作用域仅限当前组件，适合业务组件。
- 注册区别：
- 全局：在入口文件通过
app.component()/Vue.component()注册 - 局部：在组件内引入并注册（Vue3
<script setup>自动注册）
- 全局：在入口文件通过
- 最佳实践：少用全局组件，多用局部组件，保持项目结构清晰、性能更优。
理解全局组件与局部组件的区别，是写出可维护、高性能 Vue 项目的基础。合理使用两种注册方式，能让你的代码更规范、更易于协作开发。
