站長資訊網(wǎng)
vue組件有：1、component，用于渲染一個(gè)“元組件”為動態(tài)組件。2、transition，用于為單個(gè)元素或組件提供動畫過渡效果。3、transition-group，用于為列表中的多個(gè)元素或組件提供過渡效果。4、keep-alive，用于緩存包裹在其中的動態(tài)切換組件。5、slot。6、teleport，用于將其插槽內(nèi)容渲染到DOM中的另一個(gè)位置。7、Suspense。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
內(nèi)置組件無需注冊便可以直接在模板中使用。它們也是 tree-shakeable 的：僅在使用時(shí)才會包含在構(gòu)建中。
在渲染函數(shù)中使用它們時(shí)，需要顯式導(dǎo)入。例如：
import { h, Transition } from 'vue' h(Transition, { /* props */ })
1、component
-
Props：
is–string | Component - 用法：
渲染一個(gè)“元組件”為動態(tài)組件。依 is 的值，來決定哪個(gè)組件被渲染。is 的值是一個(gè)字符串，它既可以是 HTML 標(biāo)簽名稱也可以是組件名稱。
<!-- 動態(tài)組件由 vm 實(shí)例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能夠渲染注冊過的組件或 prop 傳入的組件--> <component :is="$options.components.child"></component> <!-- 可以通過字符串引用組件 --> <component :is="condition ? 'FooComponent' : 'BarComponent'"></component> <!-- 可以用來渲染原生 HTML 元素 --> <component :is="href ? 'a' : 'span'"></component>
2、transition
-
Props：
name–string用于自動生成 CSS 過渡類名。例如：name: 'fade'將自動拓展為.fade-enter，.fade-enter-active等。appear–boolean，是否在初始渲染時(shí)使用過渡。默認(rèn)為false。persisted–boolean。如果是 true，表示這是一個(gè)不真實(shí)插入/刪除元素的轉(zhuǎn)換，而是切換顯示/隱藏狀態(tài)。過渡鉤子被注入，但渲染器將跳過。相反，自定義指令可以通過調(diào)用注入的鉤子 (例如v-show) 來控制轉(zhuǎn)換。css–boolean。是否使用 CSS 過渡類。默認(rèn)為true。如果設(shè)置為false，將只通過組件事件觸發(fā)注冊的 JavaScript 鉤子。type–string。指定過渡事件類型，偵聽過渡何時(shí)結(jié)束。有效值為"transition"和"animation"。默認(rèn) Vue.js 將自動檢測出持續(xù)時(shí)間長的為過渡事件類型。mode–string控制離開/進(jìn)入過渡的時(shí)間序列。有效的模式有"out-in"和"in-out"；默認(rèn)同時(shí)進(jìn)行。duration–number | {enter: number,leave: number }。指定過渡的持續(xù)時(shí)間。默認(rèn)情況下，Vue 會等待過渡所在根元素的第一個(gè)transitionend或animationend事件。enter-from-class–stringleave-from-class–stringappear-class–stringenter-to-class–stringleave-to-class–stringappear-to-class–stringenter-active-class–stringleave-active-class–stringappear-active-class–string -
事件：
before-enterbefore-leaveenterleaveappearafter-enterafter-leaveafter-appearenter-cancelledleave-cancelled(僅v-show)appear-cancelled - 用法：
<transition> 元素作為單個(gè)元素/組件的過渡效果。<transition> 只會把過渡效果應(yīng)用到其包裹的內(nèi)容上，而不會額外渲染 DOM 元素，也不會出現(xiàn)在可被檢查的組件層級中。
<!-- 動態(tài)組件由 vm 實(shí)例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能夠渲染注冊過的組件或 prop 傳入的組件--> <component :is="$options.components.child"></component> <!-- 可以通過字符串引用組件 --> <component :is="condition ? 'FooComponent' : 'BarComponent'"></component> <!-- 可以用來渲染原生 HTML 元素 --> <component :is="href ? 'a' : 'span'"></component>
const app = Vue.createApp({ ... methods: { transitionComplete (el) { // 因?yàn)閭鬟f了'el'的DOM元素作為參數(shù) } } ... }) app.mount('#transition-demo')
3、transition-group
- Props：
tag–string，默認(rèn)為span。move-class– 覆蓋移動過渡期間應(yīng)用的 CSS 類。除了
mode，其他 attribute 和<transition>相同。 -
事件：
事件和
<transition>相同。 - 用法：
<transition-group> 元素作為多個(gè)元素/組件的過渡效果。<transition-group> 渲染一個(gè)真實(shí)的 DOM 元素。默認(rèn)渲染 <span>，可以通過 tag attribute 配置哪個(gè)元素應(yīng)該被渲染。
注意，每個(gè) <transition-group> 的子節(jié)點(diǎn)必須有獨(dú)立的 key，動畫才能正常工作
<transition-group> 支持通過 CSS transform 過渡移動。當(dāng)一個(gè)子節(jié)點(diǎn)被更新，從屏幕上的位置發(fā)生變化，它會被應(yīng)用一個(gè)移動中的 CSS 類 (通過 name attribute 或配置 move-class attribute 自動生成)。如果 CSS transform property 是“可過渡”property，當(dāng)應(yīng)用移動類時(shí)，將會使用 FLIP 技術(shù)使元素流暢地到達(dá)動畫終點(diǎn)。
<transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>
4、keep-alive
-
Props：
include–string | RegExp | Array。只有名稱匹配的組件會被緩存。exclude–string | RegExp | Array。任何名稱匹配的組件都不會被緩存。max–number | string。最多可以緩存多少組件實(shí)例。 - 用法：
<keep-alive> 包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會渲染一個(gè) DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。
當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。
主要用于保留組件狀態(tài)或避免重新渲染。
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive> <!-- 多個(gè)條件判斷的子組件 --> <keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive> <!-- 和 `<transition>` 一起使用 --> <transition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>
注意，<keep-alive> 是用在其一個(gè)直屬的子組件被切換的情形。如果你在其中有 v-for 則不會工作。如果有上述的多個(gè)條件性的子元素，<keep-alive> 要求同時(shí)只有一個(gè)子元素被渲染。
include和exclude
The include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示：
<!-- 逗號分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- regex (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。
max
最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒有被訪問的實(shí)例會被銷毀掉。
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
<keep-alive> 不會在函數(shù)式組件中正常工作，因?yàn)樗鼈儧]有緩存實(shí)例。
5、slot
-
Props：
name–string，用于具名插槽 - 用法：
<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽。<slot> 元素自身將被替換。
6、teleport
-
Props：
to – string。需要 prop，必須是有效的查詢選擇器或 HTMLElement (如果在瀏覽器環(huán)境中使用)。指定將在其中移動 <teleport> 內(nèi)容的目標(biāo)元素
<!-- 正確 --> <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> <!-- 錯(cuò)誤 --> <teleport to="h1" /> <teleport to="some-string" />
disabled – boolean。此可選屬性可用于禁用 <teleport> 的功能，這意味著其插槽內(nèi)容將不會移動到任何位置，而是在您在周圍父組件中指定了 <teleport> 的位置渲染。
<teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </teleport>
請注意，這將移動實(shí)際的 DOM 節(jié)點(diǎn)，而不是被銷毀和重新創(chuàng)建，并且它還將保持任何組件實(shí)例的活動狀態(tài)。所有有狀態(tài)的 HTML 元素 (即播放的視頻) 都將保持其狀態(tài)。
7、Suspense
用于協(xié)調(diào)對組件樹中嵌套的異步依賴的處理。
-
Props
interface SuspenseProps { timeout?: string | number }
-
事件
@resolve
@pending
@fallback
-
詳細(xì)信息
<Suspense> 接受兩個(gè)插槽：#default 和 #fallback。它將在內(nèi)存中渲染默認(rèn)插槽的同時(shí)展示后備插槽內(nèi)容。
如果在渲染時(shí)遇到異步依賴項(xiàng) (異步組件和具有 async setup() 的組件)，它將等到所有異步依賴項(xiàng)解析完成時(shí)再顯示默認(rèn)插槽。
【
