首頁  >  文章  >  vue有幾大組件

vue有幾大組件

青灯夜游
青灯夜游原創
2022-12-13 19:02:227045瀏覽

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

vue有幾大組件

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

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

元件必須先註冊以便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(&#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: {
    &#39;component-a&#39;: ComponentA,
    &#39;component-b&#39;: ComponentB
  }
})

動態元件

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

內建的標籤e9780e2c3bd5df1b2b95e629ba2e22d0" 用以動態明確不同的元件,透過控制綁定在屬性is 上的參數值,即可顯示對應的同名元件。

屬性is 可以是:

有時候為了在切換時,保存動態元件的狀態,例如元件中的輸入框的值,可以用標籤7c9485ff8c3cba5ae9343ed63c2dc3f7f95a4d7af3b8562698796a5f453933abc34106e0b4e09414b63b2ea253ff83d6f5d188ed2c074f8b944552db028f98a1221f08282418e2996498697df914ce4e 這些元素,其內部允許放置的直接子元素是有嚴格限制的,如果嵌入其他元素會被視為無效的內容,而提升到外部造成最終渲染問題。但如果我們需要在這些元素中使用元件作為直接子元素,則可以在「合法」的子元素上使用屬性is,指定渲染的實際內容,這時屬性is 用在原生的HTML 元素上,如a34de1251f0d9fe1e645927f19a896e8 其值 需要使用vue: 作為前綴,以表示解析的實際上是一個Vue 元件

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

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

  • 字符串,例如 template: '...'
  • 单文件组件 .vue
  • 91bc4aaf1732b26c8e5fcf53781ed1a6

异步组件

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

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

// 全局组件
app.component(&#39;async-example&#39;, 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 resolvereject 才执行异步组件的处理。

(学习视频分享:vuejs入门教程编程基础视频

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn