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

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

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

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

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

• 全局注冊
• 局部注冊

全局組件

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

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

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

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

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

局部組件

在一個（父）組件中組件的 components 選項中注冊的組件。

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

對于 components 對象中的每個 property 來說，其 property 名就是自定義元素的名字，其 property 值就是這個組件的選項對象。

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

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

動態(tài)組件

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

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

屬性 is 可以是：

• 已注冊組件的名字
• 一個組件的選項對象

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

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

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

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

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

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

異步組件

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

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

// 全局組件 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>'         })       })     })   } })

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

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

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