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>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綁定值的不同來渲染不同名稱的元件。
內建的標籤e9780e2c3bd5df1b2b95e629ba2e22d0"
用以動態明確不同的元件,透過控制綁定在屬性is
上的參數值,即可顯示對應的同名元件。
屬性is
可以是:
有時候為了在切換時,保存動態元件的狀態,例如元件中的輸入框的值,可以用標籤7c9485ff8c3cba5ae9343ed63c2dc3f7f95a4d7af3b8562698796a5f453933ab
、c34106e0b4e09414b63b2ea253ff83d6
、f5d188ed2c074f8b944552db028f98a1
和221f08282418e2996498697df914ce4e
這些元素,其內部允許放置的直接子元素是有嚴格限制的,如果嵌入其他元素會被視為無效的內容,而提升到外部造成最終渲染問題。但如果我們需要在這些元素中使用元件作為直接子元素,則可以在「合法」的子元素上使用屬性is
,指定渲染的實際內容,這時屬性is
用在原生的HTML 元素上,如a34de1251f0d9fe1e645927f19a896e8
其值 需要使用vue:
作為前綴,以表示解析的實際上是一個Vue 元件
<table> <tr is="vue:blog-post-row"></tr> </table>
但以上限制只是在HTML 中直接使用Vue 模板時才會遇到,如果是在一下前進使用模板就沒有這種限制:
template: '...'
.vue
91bc4aaf1732b26c8e5fcf53781ed1a6
现在的大型网页往往需要异步获取不同的数据,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中文網其他相關文章!