1. 官方定义#

全局注册的组件在整个应用的任何组件模板中都能直接使用，无需再次导入。 使用 app.component(名称, 组件) 注册。

2. 示例 + 官方规范讲解#

1
<template>
2
  <div class="card">
3
    <div class="card-header">
4
      <div>标题</div>
5
      <div>副标题</div>
6
    </div>
7
    <div v-if="content" class="card-content">
8
      {{ content }}
9
    </div>
10
  </div>
11
</template>
12

13
<script setup lang="ts">
14
type Props = {
15
  content: string
16
}
17
defineProps<Props>()
18
</script>
19

20
<style scoped lang="less">
21
/* 样式省略 */
22
</style>

1
import { createApp } from 'vue'
2
import App from './App.vue'
3
// 导入组件
4
import Card from './components/Card/index.vue'
5

6
// 链式调用：必须在 mount 之前！
7
const app = createApp(App)
8
app.component('Card', Card) // 全局注册
9
app.mount('#app')

1
<template>
2
  <Card content="我是全局卡片内容" />
3
</template>

3. 官方核心要点#

1. 注册顺序绝对不能错
   • createApp → component → mount
   • 不能写在 mount 之后
2. 全局组件优点
   • 高频组件（Button、Input、Icon、Card）不用反复 import
3. 全局组件缺点（官方不推荐滥用）
   • 不利于 Tree-shaking（没用到也会被打包）
   • 组件依赖不清晰，大型项目难维护
   • 官方建议：优先局部注册

4. 批量注册全局组件#

文章里注册 Element-Plus 图标：

1
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
2
const app = createApp(App)
3
// 遍历批量注册
4
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
5
  app.component(key, component)
6
}

官方认可：批量注册高频通用组件很常见。

1. 官方定义#

局部注册的组件仅在当前父组件内可用，子组件的子组件不能直接用。 <script setup> 中：import 后可直接在模板使用，无需注册。

2. 示例 + 官方规范#

1
<template>
2
  <div class="wraps">
3
    <!-- 直接使用导入的组件 -->
4
    <layout-menu />
5
    <layout-header />
6
    <layout-main />
7
  </div>
8
</template>
9

10
<script setup lang="ts">
11
// 1. 导入
12
import layoutHeader from './Header.vue'
13
import layoutMenu from './Menu.vue'
14
import layoutMain from './Content.vue'
15
</script>

3. 官方核心规则#

1. <script setup> 天然支持局部注册
   • import → 模板直接用，不用写 components 选项
2. 作用域严格隔离
   • A 组件导入 B → 只有 A 能用 B
   • C 想用 B → C 必须自己 import
3. 优点（官方最推荐）
   • 依赖清晰
   • 天然支持 Tree-shaking
   • 代码可维护性最高

1. 官方定义#

递归组件 = 组件在自己的模板中调用自己 必须满足两个条件：

1. 组件有 name（或由文件名自动推导）
2. 有 终止条件（否则无限递归、栈溢出）

官方文档明确：

name 选项的用途之一：允许组件在自己的模板中递归引用自己。

2. 递归组件三要素#

1. 数据结构：必须是嵌套型（children）
2. 组件名称：必须有 name（用于自调用）
3. 终止条件：v-if="item?.children?.length"

3. 完整案例#

1
type TreeList = {
2
  name: string
3
  children?: TreeList[]
4
}
5

6
const data = reactive<TreeList[]>([
7
  {
8
    name: 'no.1',
9
    children: [
10
      { name: 'no.1-1', children: [{ name: 'no.1-1-1' }] }
11
    ]
12
  },
13
  { name: 'no.2', children: [{ name: 'no.2-1' }] },
14
  { name: 'no.3' }
15
])

1
<template>
2
  <Tree :data="data" />
3
</template>

1
<!-- 这个 script 只用来定义 name，无业务逻辑 -->
2
<script lang="ts">
3
export default {
4
  name: 'TreeItem' // 递归时用的名字
5
}
6
</script>
7

8
<!-- 业务逻辑写在 setup 里 -->
9
<script setup lang="ts">
10
interface Tree {
11
  name: string
12
  children?: Tree[]
13
}
14
defineProps<{ data?: Tree[] }>()
15
</script>

1
<script setup lang="ts">
2
defineOptions({ name: 'TreeItem' }) // 官方原生
3
</script>

1
<template>
2
  <div class="tree" style="margin-left:10px;">
3
    <div v-for="(item, index) in data" :key="index">
4
      <div @click="clickItem(item)">{{ item.name }}</div>
5

6
      <!-- 递归：调用自己 TreeItem + 终止条件 -->
7
      <TreeItem
8
        v-if="item?.children?.length"
9
        :data="item.children"
10
      />
11
    </div>
12
  </div>
13
</template>

4. 递归组件#

1. 必须有 name
   • 用于模板内自调用
   • 不写 name → 报错：组件未找到
2. 必须有终止条件

   1
   v-if="item?.children?.length"

   没有子节点时停止渲染
3. 数据必须是递归类型

   1
   type Tree = {
   2
     name: string
   3
     children?: Tree[]
   4
   }

4. 每次递归传入 children

   1
   <TreeItem :data="item.children" />