vue有4大元件：1、全域元件，用「app.component(...)」方法來註冊全域元件，全域元件可在應用的任何元件模板中使用。 2、局部元件，是在一個（父）元件中的「components」選項中註冊的元件。 3.動態元件，指根據給屬性is綁定值的不同來渲染不同名稱的元件。 4.非同步元件，在載入頁面時並不立即渲染，而是要等帶一些業務邏輯完成後，才會執行元件內的邏輯和渲染到頁面上。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
Vue 的元件本質上是一個具有預先定義選項的實例，我們使用小型的、獨立和通常可重複使用的元件，透過層層拼裝，最終形成了一個完整的頁面。
元件必須先註冊以便Vue 應用程式能夠識別，有兩種元件的註冊類型：
<ul>（在根元件中）使用方法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 模板時才會遇到，如果是在一下前進使用模板就沒有這種限制：
<ul>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 才执行异步组件的处理。
以上是vue有幾大組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
