vue有4大組件：1、全局組件，用“app.component(…)”方法來(lái)注冊(cè)全局組件，全局組件可在應(yīng)用的任何組件模板中使用。2、局部組件，是在一個(gè)（父）組件中的“components”選項(xiàng)中注冊(cè)的組件。3、動(dòng)態(tài)組件，指根據(jù)給屬性is綁定值的不同來(lái)渲染不同名稱的組件。4、異步組件，在加載頁(yè)面時(shí)并不立即渲染，而是要等帶一些業(yè)務(wù)邏輯完成后，才會(huì)執(zhí)行組件內(nèi)的邏輯和渲染到頁(yè)面上。

前端（vue）入門(mén)到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

Vue 的組件本質(zhì)上是一個(gè)具有預(yù)定義選項(xiàng)的實(shí)例，我們使用小型的、獨(dú)立和通?？蓮?fù)用的組件，通過(guò)層層拼裝，最終形成了一個(gè)完整的頁(yè)面。

組件必須先注冊(cè)以便 Vue 應(yīng)用能夠識(shí)別，有兩種組件的注冊(cè)類型：

• 全局注冊(cè)
• 局部注冊(cè)

全局組件

（在根組件中）使用 方法app.component('component-Name', {}) 來(lái)注冊(cè)全局組件，全局注冊(cè)的組件可以在應(yīng)用中的任何組件的模板中使用。（學(xué)習(xí)視頻分享：vuejs入門(mén)教程、編程基礎(chǔ)視頻）

其中第一個(gè)參數(shù)時(shí)組件名，推薦遵循 W3C 規(guī)范中的自定義組件名（避免與當(dāng)前以及未來(lái)的 HTML 元素發(fā)生沖突）：字母全小寫(xiě)且必須包含一個(gè)連字符。第二個(gè)參數(shù)是組件的配置選項(xiàng)。

const app = Vue.createApp(); app.component('my-component', {     template: `<h1>Hello World!</h1>` }); const vm = app.mount('#app')

⚠️ 全局組件雖然可以方便地在各種組件中使用（包括其各自的內(nèi)部），但是這可能造成構(gòu)建項(xiàng)目時(shí)體積增大，用戶下載 JavaScript 的無(wú)謂增加。

? 需要在 app.mount('#app') 應(yīng)用掛載到 DOM 之前進(jìn)行全局組件的注冊(cè)

局部組件

在一個(gè)（父）組件中組件的 components 選項(xiàng)中注冊(cè)的組件。

這些子組件通過(guò)一個(gè)普通的 JavaScript 對(duì)象來(lái)定義，其接收的參數(shù)和全局組件一樣，但是它們只能在該父組件中使用，稱為局部組件。

對(duì)于 components 對(duì)象中的每個(gè) property 來(lái)說(shuō)，其 property 名就是自定義元素的名字，其 property 值就是這個(gè)組件的選項(xiàng)對(duì)象。

const ComponentA = {   /* ... */ } const ComponentB = {   /* ... */ } const ComponentC = {   /* ... */ }

// 然后在父組件的 `components` 選項(xiàng)中定義你想要使用的組件 const app = Vue.createApp({   components: {     'component-a': ComponentA,     'component-b': ComponentB   } })

動(dòng)態(tài)組件

動(dòng)態(tài)組件指根據(jù)給屬性 is綁定值的不同來(lái)渲染不同名稱的組件。

內(nèi)置的標(biāo)簽 <component :is="componentName />" 用以動(dòng)態(tài)顯式不同的組件，通過(guò)控制綁定在屬性 is 上的參數(shù)值，即可顯示相應(yīng)的同名組件。

屬性 is 可以是：

• 已注冊(cè)組件的名字
• 一個(gè)組件的選項(xiàng)對(duì)象

? 有時(shí)候?yàn)榱嗽谇袚Q時(shí)，保存動(dòng)態(tài)組件的狀態(tài)，例如組件中的輸入框的值，可以用標(biāo)簽 <keep-alive></keep-alive> 包裹動(dòng)態(tài)組件。

? 屬性 is 還可以用于解決 HTML 元素嵌套的規(guī)則限制，將它應(yīng)用到原生的 HTML 標(biāo)簽上，它的值就是組件名，這樣原生標(biāo)簽實(shí)際渲染出來(lái)的內(nèi)容就是組件。

因?yàn)閷?duì)于 <ul>、<ol>、<table> 和 <select> 這些元素，其內(nèi)部允許放置的直接子元素是有嚴(yán)格限制的，如果嵌入其他元素會(huì)被視為無(wú)效的內(nèi)容，而提升到外部造成最終渲染問(wèn)題。但如果我們需要在這些元素中使用組件作為直接子元素，則可以在「合法」的子元素上使用屬性 is，指定渲染的實(shí)際內(nèi)容，這時(shí)屬性 is 用在原生的 HTML 元素上，如 <tr> 其值 ? 需要使用 vue: 作為前綴，以表示解析的實(shí)際上是一個(gè) Vue 組件

<table>   <tr is="vue:blog-post-row"></tr> </table>

但以上限制只是在 HTML 中直接使用 Vue 模板時(shí)才會(huì)遇到，如果是在一下前進(jìn)使用模板就沒(méi)有這種限制：

• 字符串，例如 template: '...'
• 單文件組件 .vue
• <script type="text/x-template">

異步組件

現(xiàn)在的大型網(wǎng)頁(yè)往往需要異步獲取不同的數(shù)據(jù)，Vue 有一個(gè) defineAsyncComponent 方法定義異步組件，以優(yōu)化應(yīng)用的加載和用戶體驗(yàn)。

異步組件在加載頁(yè)面時(shí)并不立即渲染，而是要等帶一些業(yè)務(wù)邏輯完成后，才會(huì)執(zhí)行組件內(nèi)的邏輯和渲染到頁(yè)面上。

// 全局組件 app.component('async-example', Vue.defineAsyncComponent(() => {   return new Promise((resolve, reject) => {     resolve({       template: '<div>I am async!</div>'     })   }) }))  // 局部組件 import { createApp, defineAsyncComponent } from 'vue'  createApp({   // ...   components: {     AsyncComponent: defineAsyncComponent(() => {       return new Promise((resolve, reject) => {         resolve({           template: '<div>I am async!</div>'         })       })     })   } })

異步組件的注冊(cè)和一般的同步組件類似，如果是注冊(cè)全局組件，也是使用 app.component()進(jìn)行注冊(cè)，不過(guò)第二個(gè)參數(shù)使用 Vue.defineAsyncComponent() 方法告訴 Vue 應(yīng)用該組件是異步組件。

defineAsyncComponent() 方法的參數(shù)是一個(gè)匿名函數(shù)，而且函數(shù)是返回一個(gè) Promise。在 Promise 內(nèi)應(yīng)該 resovlve({}) 一個(gè)對(duì)象，其中包含了構(gòu)建組件相關(guān)配置參數(shù)。只有當(dāng) Promise resolve 或 reject 才執(zhí)行異步組件的處理。

（學(xué)習(xí)視頻分享：vuejs入門(mén)教程、編程基礎(chǔ)視頻）