案例概述

本案例演示了 Vue 3 中组件的两种注册方式：全局注册和局部注册，以及如何在父组件中引用这些组件。

组件结构

src/components/2026516/
├── 2.vue              # 父组件（主组件）
├── GlobalComponent.vue # 全局组件
└── LocalComponent.vue  # 局部组件

核心概念

1. 全局组件注册

全局组件通过 app.component() 方法注册，可在整个应用的任何组件中使用：

import GlobalComponent from './components/2026516/GlobalComponent.vue'

const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app')

特点：

在应用启动时注册
可在任何组件模板中直接使用
适合频繁使用的通用组件

2. 局部组件导入

局部组件通过 import 语句导入，仅在当前组件范围内可用：

import LocalComponent from './LocalComponent.vue'

特点：

使用 script setup 语法时自动注册
只能在导入它的组件中使用
代码更清晰，避免命名冲突

3. 组件引用

在模板中以标签形式引用组件：

<template>
  <div class="box">
    <GlobalComponent />
    <LocalComponent />
  </div>
</template>

组件标签命名规则：

可使用短横线分隔：<my-component>
可使用帕斯卡命名：<MyComponent>
标签名必须与注册时的组件名对应

文件详解

GlobalComponent.vue

全局组件，使用实线边框标识：

<template>
  <div class="global-container">
    <h5>全局组件</h5>
  </div>
</template>

<style>
.global-container {
  border: 1px solid black;
  height: 50px;
  flex: 1;
}
</style>

LocalComponent.vue

局部组件，使用虚线边框标识：

<template>
  <div class="local-container">
    <h5>局部组件</h5>
  </div>
</template>

<style>
.local-container {
  border: 1px dashed black;
  height: 50px;
  flex: 1;
}
</style>

2.vue（父组件）

引用全局组件和局部组件的父组件：

<template>
  <div>
    <h5>父组件</h5>
    <div class="box">
      <GlobalComponent />
      <LocalComponent />
    </div>
  </div>
</template>

<script setup>
import LocalComponent from './LocalComponent.vue'
</script>

<style>
.box {
  display: flex;
}
</style>

运行效果

页面显示：

父组件标题
并排显示的全局组件（实线边框）和局部组件（虚线边框）

关键要点

全局 vs 局部：全局组件适合通用组件（如按钮、输入框），局部组件适合特定场景使用
自动注册：script setup 语法会自动注册导入的组件，无需手动声明
父子关系：引用组件的是父组件，被引用的是子组件
避免循环引用：组件不能自引用或互相引用，否则会导致死循环

main.js 配置

import { createApp } from 'vue'
import App from './components/2026516/2.vue'
import GlobalComponent from './components/2026516/GlobalComponent.vue'

const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app')

此配置实现了：

创建 Vue 应用实例
全局注册 GlobalComponent
将应用挂载到 #app 元素

总结

<!--GlobalComponent.vue-->

<template>
  <div class="global-container">
    <h5>全局组件</h5>
  </div>
</template>

<style>
.global-container {
  border: 1px solid black;
  height: 50px;
  flex: 1;
}
</style>

<!-- LocalComponent.vue -->
<template>
  <div class="local-container">
    <h5>局部组件</h5>
  </div>
</template>

<style>
.local-container {
  border: 1px dashed black;
  height: 50px;
  flex: 1;
}
</style>

//main.js
import { createApp } from 'vue'
import App from './components/2026516/2.vue'
import GlobalComponent from './components/2026516/GlobalComponent.vue'

const app = createApp(App)
app.component('GlobalComponent', GlobalComponent) //注册全局
app.mount('#app')

<template>
  <div>
    <h5>父组件</h5>
    <div class="box">
      <GlobalComponent />
      <LocalComponent /> <!-- 引用局部组件-->
    </div>
  </div>
</template>

<script setup>
import LocalComponent from './LocalComponent.vue' //导入局部组件
</script>

<style>
.box {
  display: flex;
}
</style>

Vue 组件注册与引用案例