在Vue中，開(kāi)發(fā)者可以將頁(yè)面中獨(dú)立的、可重用的部分封裝成組件，對(duì)組件的結(jié)構(gòu)，樣式和行為進(jìn)行設(shè)置。組件是 Vue 的基本結(jié)構(gòu)單元，組件之間可以相互引用。

---

一.注冊(cè)組件

當(dāng)在Vue項(xiàng)目中定義了一個(gè)新的組件后，要想在其他組件中引用這個(gè)新的組件，需要對(duì)新的組件進(jìn)行注冊(cè)。在注冊(cè)組件的時(shí)候，需要給組件取一個(gè)名字，從而區(qū)分每個(gè)組件，可以采用帕斯卡命名法(PascalCase)為組件命名。

Vue 提供了兩種注冊(cè)組件的方式，分別是全局注冊(cè)和局部注冊(cè)。接下來(lái)對(duì)這兩種注冊(cè)組件的方式分別進(jìn)行講解。

---

1.全局注冊(cè)

???????????在實(shí)際開(kāi)發(fā)中，如果某個(gè)組件的使用頻率很高，許多組件中都會(huì)引用該組件，則推薦將該組件全局注冊(cè)。被全局注冊(cè)的組件可以在當(dāng)前Vue項(xiàng)目的任何一個(gè)組件內(nèi)引用。

????????????在 Vue 項(xiàng)目的 src\main.js 文件中，通過(guò) Vue 應(yīng)用實(shí)例的 component()方法可以全局注冊(cè)組件，該方法的語(yǔ)法格式如下。

component('組件名稱(chēng)'，需要被注冊(cè)的組件)

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

????????例如，在 src\main.js 文件中注冊(cè)一個(gè)全局組件 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行代碼用于導(dǎo)入 MyComponent 組件;第5行代碼用于創(chuàng)建Vue應(yīng)用用實(shí)例;第6行代碼用于將MyComponent組件注冊(cè)為全局組件。

????????component()方法支持鏈?zhǔn)秸{(diào)用，可以連續(xù)注冊(cè)多個(gè)組件，示例代碼如下。

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

---

2.局部注冊(cè)

????????在實(shí)際開(kāi)發(fā)中，如果某些組件只在特定的情況下被用到，推薦進(jìn)行局部注冊(cè)。局部注冊(cè)即在某個(gè)組件中注冊(cè)、被局部注冊(cè)的組件只能在當(dāng)前注冊(cè)范圍內(nèi)使用。例如，在組件A中注冊(cè)了組件B，則組件B只能在組件A中使用，不能在組件C中使用。

????????局部注冊(cè)組件的示例代碼如下。

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

????????在上述代碼中，第4行代碼用于將 ComponentA 組件局部注冊(cè)到當(dāng)前組件中。其中,冒號(hào)前面的ComponenA 是局部注冊(cè)的組件名稱(chēng)，冒號(hào)后面的ComponentA 是組件本身。由于冒號(hào)前后代碼相同，所以可以將(ComponentA:ComponentA }簡(jiǎn)寫(xiě)為{ComponentA}。

????????在使用 setup語(yǔ)法糖時(shí)，導(dǎo)人的組件會(huì)被自動(dòng)注冊(cè),無(wú)須手動(dòng)注冊(cè)，導(dǎo)入后可以直接在模板中使用，示例代碼如下。

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

????????上述代碼完成了 ComponentA 組件的導(dǎo)入和注冊(cè)。

---

二.引用組件

????????將組件注冊(cè)完成后，若要將組件在頁(yè)面中渲染出來(lái)，需要引用組件。默認(rèn)情況下，Vue項(xiàng)目中有一個(gè)根組件，根組件可以引用其他組件，引用后會(huì)形成父子關(guān)系--根組件是父組件，被引用的組件是子組件。在子組件中也可以引用其他組件。

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

????????接下來(lái)通過(guò)實(shí)際操作的方式演示組件的使用方法，具體步驟如下。

① 創(chuàng)建 src\components\ComponentUse.vue 文件，具體代碼如下。

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

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

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

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

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

④ 創(chuàng)建 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 行代碼通過(guò)<template>標(biāo)簽定義 LocalComponent 組件的模板第6~12 行代碼通過(guò)<style>標(biāo)簽定義 LocalComponent 組件的樣式。

⑤ 修改 src\main.js 文件，導(dǎo)人 GlobalComponent組件并調(diào)用 component( )方法全局注冊(cè)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行代碼通過(guò) impont 語(yǔ)法導(dǎo)入 GlobalComponent 組件;第6行代碼過(guò)調(diào)用 component()方法全局注冊(cè) GlobalComponent 組件。

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

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

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

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

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

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

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

---

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