技術文章 » vue有幾大元件

vue有幾大元件

2022-12-13 22:01:09

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

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

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

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

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

  • 全域性註冊
  • 區域性註冊

全域性元件

（在根元件中）使用 方法app.component('component-Name', {}) 來註冊全域性元件，全域性註冊的元件可以在應用中的任何元件的模板中使用。（學習視訊分享：、）

其中第一個引數時元件名，推薦遵循 中的自定義元件名（避免與當前以及未來的 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 才執行非同步元件的處理。

（學習視訊分享：、）

以上就是vue有幾大元件的詳細內容，更多請關注TW511.COM其它相關文章！