vue的四大組件是什么

這篇“vue的四大組件是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue的四大組件是什么”文章吧。

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

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

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

• 全局注冊

• 局部注冊

全局組件

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

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

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

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

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

局部組件

在一個（父）組件中組件的 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)置的標簽 <component :is="componentName />" 用以動態(tài)顯式不同的組件，通過控制綁定在屬性 is 上的參數(shù)值，即可顯示相應的同名組件。

屬性 is 可以是：

• 已注冊組件的名字

• 一個組件的選項對象

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

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

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

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

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

• 字符串，例如 template: '...'

• 單文件組件 .vue

• <script type="text/x-template">

異步組件

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

異步組件在加載頁面時并不立即渲染，而是要等帶一些業(yè)務邏輯完成后，才會執(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()進行注冊，不過第二個參數(shù)使用 Vue.defineAsyncComponent() 方法告訴 Vue 應用該組件是異步組件。

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

以上就是關(guān)于“vue的四大組件是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。