vue有幾大組件

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

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

Vue 的元件本質上是一個具有預先定義選項的實例，我們使用小型的、獨立和通常可重複使用的元件，透過層層拼裝，最終形成了一個完整的頁面。

元件必須先註冊以便Vue 應用程式能夠識別，有兩種元件的註冊類型：

• #全域註冊
• 局部註冊

#全域元件

（在根元件中）使用方法app.component('component-Name', {}) 來註冊全域元件，全域註冊的元件可以在應用程式中的任何元件的模板中使用。 （學習影片分享：vuejs入門教學、程式設計基礎影片）

其中第一個參數時元件名，建議遵循W3C 規格中的自訂元件名稱（避免與目前以及未來的HTML 元素發生衝突）：字母全小寫且必須包含一個連字號。第二個參數是組件的配置選項。

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

⚠️ 全域元件雖然可以方便地在各種元件中使用（包括各自的內部），但是這可能造成建置專案時體積增大，使用者下載 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 />"> 用以動態明確不同的元件，透過控制綁定在<strong>屬性<code>is 上的參數值，即可顯示對應的同名元件。

屬性is 可以是：

• 已註冊元件的名字
• 一個元件的選項物件

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

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

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

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

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

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

异步组件

现在的大型网页往往需要异步获取不同的数据，Vue 有一个 defineAsyncComponent 方法定义异步组件，以优化应用的加载和用户体验。

异步组件在加载页面时并不立即渲染，而是要等带一些业务逻辑完成后，才会执行组件内的逻辑和渲染到页面上。

// 全局组件
app.component('async-example', Vue.defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    resolve({
      template: &#39;<div>I am async!</div>&#39;
    })
  })
}))

// 局部组件
import { createApp, defineAsyncComponent } from &#39;vue&#39;

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() => {
      return new Promise((resolve, reject) => {
        resolve({
          template: &#39;<div>I am async!</div>&#39;
        })
      })
    })
  }
})

异步组件的注册和一般的同步组件类似，如果是注册全局组件，也是使用 app.component()进行注册，不过第二个参数使用 Vue.defineAsyncComponent() 方法告诉 Vue 应用该组件是异步组件。

defineAsyncComponent() 方法的参数是一个匿名函数，而且函数是返回一个 Promise。在 Promise 内应该 resovlve({}) 一个对象，其中包含了构建组件相关配置参数。只有当 Promise resolve 或 reject 才执行异步组件的处理。

（学习视频分享：vuejs入门教程、编程基础视频）

以上是vue有幾大組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！