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

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

本教程操作環境：windows7系統、vue3版，DELL G3電腦。

Vue 的組件本質上是一個具有預定義選項的實例，我們使用小型的、獨立和通?？蓮陀玫慕M件，通過層層拼裝，最終形成了一個完整的頁面。

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

• 全局注冊
• 局部注冊

全局組件

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

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

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

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

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

局部組件

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

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

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

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

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

動態組件

動態組件指根據給屬性 is綁定值的不同來渲染不同名稱的組件。

內置的標簽 <component :is="componentName />" 用以動態顯式不同的組件，通過控制綁定在屬性 is 上的參數值，即可顯示相應的同名組件。

屬性 is 可以是：

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

? 有時候為了在切換時，保存動態組件的狀態，例如組件中的輸入框的值，可以用標簽 <keep-alive></keep-alive> 包裹動態組件。

? 屬性 is 還可以用于解決 HTML 元素嵌套的規則限制，將它應用到原生的 HTML 標簽上，它的值就是組件名，這樣原生標簽實際渲染出來的內容就是組件。

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

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

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

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

異步組件

現在的大型網頁往往需要異步獲取不同的數據，Vue 有一個 defineAsyncComponent 方法定義異步組件，以優化應用的加載和用戶體驗。

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

// 全局組件 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()進行注冊，不過第二個參數使用 Vue.defineAsyncComponent() 方法告訴 Vue 應用該組件是異步組件。

defineAsyncComponent() 方法的參數是一個匿名函數，而且函數是返回一個 Promise。在 Promise 內應該 resovlve({}) 一個對象，其中包含了構建組件相關配置參數。只有當 Promise resolve 或 reject 才執行異步組件的處理。

（學習視頻分享：vuejs入門教程、編程基礎視頻）