在Vue中，開發者可以將頁面中獨立的、可重用的部分封裝成組件，對組件的結構，樣式和行為進行設置。組件是 Vue 的基本結構單元，組件之間可以相互引用。

---

一.注冊組件

當在Vue項目中定義了一個新的組件后，要想在其他組件中引用這個新的組件，需要對新的組件進行注冊。在注冊組件的時候，需要給組件取一個名字，從而區分每個組件，可以采用帕斯卡命名法(PascalCase)為組件命名。

Vue 提供了兩種注冊組件的方式，分別是全局注冊和局部注冊。接下來對這兩種注冊組件的方式分別進行講解。

---

1.全局注冊

???????????在實際開發中，如果某個組件的使用頻率很高，許多組件中都會引用該組件，則推薦將該組件全局注冊。被全局注冊的組件可以在當前Vue項目的任何一個組件內引用。

????????????在 Vue 項目的 src\main.js 文件中，通過 Vue 應用實例的 component()方法可以全局注冊組件，該方法的語法格式如下。

component('組件名稱'，需要被注冊的組件)

????????上述語法格式中，component()方法接收兩個參數，第1個參數為組件名稱，注冊完成后即可全局使用該組件名稱，第2個參數為需要被注冊的組件。

????????例如，在 src\main.js 文件中注冊一個全局組件 MyComponent，示例代碼如下。

import {createApp )from 'vue';
import'./style.css'
import App from'./app.vue' const app =createApp(App)import MyComponent from './components/MyComponent.vue'app.component('MyComponent',MyComponent)app.mount('#app')

????????在上述代碼中，第4行代碼用于導入 MyComponent 組件;第5行代碼用于創建Vue應用用實例;第6行代碼用于將MyComponent組件注冊為全局組件。

????????component()方法支持鏈式調用，可以連續注冊多個組件，示例代碼如下。

app.component('ComponentA', ComponentA)
.component ('ComponentB', ComponentB)
.component('ComponentC',ComponentC)

---

2.局部注冊

????????在實際開發中，如果某些組件只在特定的情況下被用到，推薦進行局部注冊。局部注冊即在某個組件中注冊、被局部注冊的組件只能在當前注冊范圍內使用。例如，在組件A中注冊了組件B，則組件B只能在組件A中使用，不能在組件C中使用。

????????局部注冊組件的示例代碼如下。

<soript>
import ComponentA from './ComponentA.vue'
export default{
components:{ ComponentA:ComponentA}
}</script>

????????在上述代碼中，第4行代碼用于將 ComponentA 組件局部注冊到當前組件中。其中,冒號前面的ComponenA 是局部注冊的組件名稱，冒號后面的ComponentA 是組件本身。由于冒號前后代碼相同，所以可以將(ComponentA:ComponentA }簡寫為{ComponentA}。

????????在使用 setup語法糖時，導人的組件會被自動注冊,無須手動注冊，導入后可以直接在模板中使用，示例代碼如下。

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

????????上述代碼完成了 ComponentA 組件的導入和注冊。

---

二.引用組件

????????將組件注冊完成后，若要將組件在頁面中渲染出來，需要引用組件。默認情況下，Vue項目中有一個根組件，根組件可以引用其他組件，引用后會形成父子關系--根組件是父組件，被引用的組件是子組件。在子組件中也可以引用其他組件。

????????在組件的<template>標簽中可以引用其他組件，被引用的組件需要寫成標簽的形式,標簽名應與組件名對應。組件的標簽名可以使用短橫線分隔或帕斯卡命名法命名。例如，<my-component>標簽和<MyComponent>標簽都表示引用 MyComponent 組件。一個組件可以被引用多次，但不可出現自我引用和互相引用的情況，否則會出現死循環。

????????接下來通過實際操作的方式演示組件的使用方法，具體步驟如下。

① 創建 src\components\ComponentUse.vue 文件，具體代碼如下。

<template>
<h5>父組件</h5>
<div class="box">
</div></template><style>.box{display: flex;}
</style>

????????在上述代碼中,第3~4行代碼定義了 div 元素,該 div元素將作為被引用組件的容器:第7~9行代碼用于將 div 元素設置為彈性盒子。

② 修改 sre\main.js文件，切換頁面中顯示的組件，具體代碼如下。

 <template>
<div class="global-container">
<h5>全局組件</h5>
</template>
</div><style>
.global-container{
border: lpx solid black;
height: 50px;
flex: 1;
}
</style>

????????在上述代碼中，第1~5行代碼通過<template>標簽定義 GlobalComponent 組件的模板:第6~12 行代碼通過<style>標簽定義 GlobalComponent 組件的樣式。

④ 創建 src\components\LocalComponent.vue 文件，表示局部組件，具體代碼如下。

<template>
<div class="local-container">
<h5>局部組件</h5>
</div></template><style>
.local-container {
border: 1px dashed black;height: 50px;flex:1;}
</style>

????????在上述代碼中，第1~5 行代碼通過<template>標簽定義 LocalComponent 組件的模板第6~12 行代碼通過<style>標簽定義 LocalComponent 組件的樣式。

⑤ 修改 src\main.js 文件，導人 GlobalComponent組件并調用 component( )方法全局注冊ClobalComponent組件，具體代碼如下。

import { createApp }from 'vue'
import './style.css'
import App from'./components/ComponentUse.vue'
import GlobalComponent from'./components/GlobalComponent .vue'
const app =createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app')

????????在上述代碼中,第4行代碼通過 impont 語法導入 GlobalComponent 組件;第6行代碼過調用 component()方法全局注冊 GlobalComponent 組件。

⑥ 修改 srekcomponents\ComponentUse.vue 文件，添加代碼導人 LocalComponent 組件具體代碼如下。

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

????????⑦ 修改 srckcomponents\CcomponenUse.vue 文件，在class為 box的<div>標簽中引用GlobalComponent 組件和 LocalComponent 組件，具體代碼如下。

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

????????在上述代碼中,第2行和第3行代碼分別在ComponentUse 組件中以標簽的形式引用了GlobalComponent 組件和 LocalComponent 組件。

????????保存上述代碼后，在瀏覽器中訪問 http://127.0.0.1:51731,引|用組件后的頁面效果如圖所示。

?????????從圖可以看出，在ComponentUse 組件中成功引用了 GlobalComponent 組件和LocalComponent組件，頁面中顯示了GlobalComponent組件和 LocalComponent 組件的內容。

---

感謝大家的閱讀，如有不對的地方，可以私信我，感謝大家！