Vue 3.0 內(nèi)置組件

2021-07-16 11:27 更新

#component

  • Props：

  • is - string | Component

  • 用法：

渲染一個(gè)“元組件”為動(dòng)態(tài)組件。依 is 的值，來(lái)決定哪個(gè)組件被渲染。is 的值是一個(gè)字符串，它既可以是 HTML 標(biāo)簽名稱也可以是組件名稱。

  1.   <!--  動(dòng)態(tài)組件由 vm 實(shí)例的 `componentId` property 控制 -->
  2.   <component :is="componentId"></component>
  4.   
  5.   <!-- 也能夠渲染注冊(cè)過(guò)的組件或 prop 傳入的組件-->
  6.   <component :is="$options.components.child"></component>
  8.   
  9.   <!-- 可以通過(guò)字符串引用組件 -->
  10.   <component :is="condition ? 'FooComponent' : 'BarComponent'"></component>
  12.   
  13.   <!-- 可以用來(lái)渲染原生 HTML 元素 -->
  14.   <component :is="href ? 'a' : 'span'"></component>

#transition

  • Props：

  • name - string 用于自動(dòng)生成 CSS 過(guò)渡類名。例如：name: 'fade' 將自動(dòng)拓展為 .fade-enter，.fade-enter-active 等。
  • appear - boolean，是否在初始渲染時(shí)使用過(guò)渡。默認(rèn)為 false。
  • persisted - boolean。如果是 true，表示這是一個(gè)不真實(shí)插入/刪除元素的轉(zhuǎn)換，而是切換顯示/隱藏狀態(tài)。過(guò)渡鉤子被注入，但渲染器將跳過(guò)。相反，自定義指令可以通過(guò)調(diào)用注入的鉤子 (例如 v-show) 來(lái)控制轉(zhuǎn)換。
  • css - boolean。是否使用 CSS 過(guò)渡類。默認(rèn)為 true。如果設(shè)置為 false，將只通過(guò)組件事件觸發(fā)注冊(cè)的 JavaScript 鉤子。
  • type - string。指定過(guò)渡事件類型，偵聽(tīng)過(guò)渡何時(shí)結(jié)束。有效值為 "transition" 和 "animation"。默認(rèn) Vue.js 將自動(dòng)檢測(cè)出持續(xù)時(shí)間長(zhǎng)的為過(guò)渡事件類型。
  • mode - string 控制離開(kāi)/進(jìn)入過(guò)渡的時(shí)間序列。有效的模式有 "out-in" 和 "in-out"；默認(rèn)同時(shí)進(jìn)行。
  • duration - number | { enter : number, leave : number }。指定過(guò)渡的持續(xù)時(shí)間。默認(rèn)情況下，Vue 會(huì)等待過(guò)渡所在根元素的第一個(gè) transitionend 或 animationend 事件。
  • enter-from-class - string
  • leave-from-class - string
  • appear-class - string
  • enter-to-class - string
  • leave-to-class - string
  • appear-to-class - string
  • enter-active-class - string
  • leave-active-class - string
  • appear-active-class - string

  • 事件：

  • before-enter
  • before-leave
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled (僅 v-show)
  • appear-cancelled

  • 用法：

<transition> 元素作為單個(gè)元素/組件的過(guò)渡效果。<transition> 只會(huì)把過(guò)渡效果應(yīng)用到其包裹的內(nèi)容上，而不會(huì)額外渲染 DOM 元素，也不會(huì)出現(xiàn)在可被檢查的組件層級(jí)中。

  1.   <!-- 單個(gè)元素 -->
  2.   <transition>
  3.     <div v-if="ok">toggled content</div>
  4.   </transition>
  6.   
  7.   <!-- 動(dòng)態(tài)組件 -->
  8.   <transition name="fade" mode="out-in" appear>
  9.     <component :is="view"></component>
  10.   </transition>
  12.   
  13.   <!-- 事件鉤子 -->
  14.   <div id="transition-demo">
  15.     <transition @after-enter="transitionComplete">
  16.       <div v-show="ok">toggled content</div>
  17.     </transition>
  18.   </div>

  1.   const app = Vue.createApp({
  2.     ...
  3.     methods: {
  4.       transitionComplete (el) {
  5.         // 因?yàn)閭鬟f了'el'的DOM元素作為參數(shù)
  6.       }
  7.     }
  8.     ...
  9.   })
  11.   
  12.   app.mount('#transition-demo')

#transition-group

  • Props：

  • tag - string，默認(rèn)為 span。
  • move-class - 覆蓋移動(dòng)過(guò)渡期間應(yīng)用的 CSS 類。
  • 除了 mode，其他 attribute 和 <transition> 相同。

  • 事件：

  • 事件和 <transition> 相同。

  • 用法：

<transition-group> 元素作為多個(gè)元素/組件的過(guò)渡效果。<transition-group> 渲染一個(gè)真實(shí)的 DOM 元素。默認(rèn)渲染 <span>，可以通過(guò) tag attribute 配置哪個(gè)元素應(yīng)該被渲染。

注意，每個(gè) <transition-group> 的子節(jié)點(diǎn)必須有獨(dú)立的 key，動(dòng)畫才能正常工作

<transition-group> 支持通過(guò) CSS transform 過(guò)渡移動(dòng)。當(dāng)一個(gè)子節(jié)點(diǎn)被更新，從屏幕上的位置發(fā)生變化，它會(huì)被應(yīng)用一個(gè)移動(dòng)中的 CSS 類 (通過(guò) name attribute 或配置 move-class attribute 自動(dòng)生成)。如果 CSS transform property 是“可過(guò)渡”property，當(dāng)應(yīng)用移動(dòng)類時(shí)，將會(huì)使用 FLIP 技術(shù)使元素流暢地到達(dá)動(dòng)畫終點(diǎn)。

  1.   <transition-group tag="ul" name="slide">
  2.     <li v-for="item in items" :key="item.id">
  3.       {{ item.text }}
  4.     </li>
  5.   </transition-group>

#keep-alive

  • Props：

  • include - string | RegExp | Array。只有名稱匹配的組件會(huì)被緩存。
  • exclude - string | RegExp | Array。任何名稱匹配的組件都不會(huì)被緩存。
  • max - number | string。最多可以緩存多少組件實(shí)例。

  • 用法：

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在組件的父組件鏈中。

當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。

主要用于保留組件狀態(tài)或避免重新渲染。

  1.   <!-- 基本 -->
  2.   <keep-alive>
  3.     <component :is="view"></component>
  4.   </keep-alive>
  6.   
  7.   <!-- 多個(gè)條件判斷的子組件 -->
  8.   <keep-alive>
  9.     <comp-a v-if="a > 1"></comp-a>
  10.     <comp-b v-else></comp-b>
  11.   </keep-alive>
  13.   
  14.   <!-- 和 `<transition>` 一起使用 -->
  15.   <transition>
  16.     <keep-alive>
  17.       <component :is="view"></component>
  18.     </keep-alive>
  19.   </transition>

注意，<keep-alive> 是用在其一個(gè)直屬的子組件被切換的情形。如果你在其中有 v-for 則不會(huì)工作。如果有上述的多個(gè)條件性的子元素，<keep-alive> 要求同時(shí)只有一個(gè)子元素被渲染。

  • include 和 exclude

The include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來(lái)表示：

  1.   <!-- 逗號(hào)分隔字符串 -->
  2.   <keep-alive include="a,b">
  3.     <component :is="view"></component>
  4.   </keep-alive>
  6.   
  7.   <!-- regex (使用 `v-bind`) -->
  8.   <keep-alive :include="/a|b/">
  9.     <component :is="view"></component>
  10.   </keep-alive>
  12.   
  13.   <!-- Array (使用 `v-bind`) -->
  14.   <keep-alive :include="['a', 'b']">
  15.     <component :is="view"></component>
  16.   </keep-alive>

匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。

  • max

最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒(méi)有被訪問(wèn)的實(shí)例會(huì)被銷毀掉。

  1.   <keep-alive :max="10">
  2.     <component :is="view"></component>
  3.   </keep-alive>

WARNING

<keep-alive> 不會(huì)在函數(shù)式組件中正常工作，因?yàn)樗鼈儧](méi)有緩存實(shí)例。

#slot

  • Props：

  • name - string，用于具名插槽

  • 用法：

<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽。<slot> 元素自身將被替換。

詳細(xì)用法，請(qǐng)參考下面教程的鏈接。

#teleport

  • Props：

  • to - string。需要 prop，必須是有效的查詢選擇器或 HTMLElement (如果在瀏覽器環(huán)境中使用)。指定將在其中移動(dòng) <teleport> 內(nèi)容的目標(biāo)元素

  1.   <!-- 正確 -->
  2.   <teleport to="#some-id" />
  3.   <teleport to=".some-class" />
  4.   <teleport to="[data-teleport]" />
  6.   
  7.   <!-- 錯(cuò)誤 -->
  8.   <teleport to="h1" />
  9.   <teleport to="some-string" />

  • disabled - boolean。此可選屬性可用于禁用 <teleport> 的功能，這意味著其插槽內(nèi)容將不會(huì)移動(dòng)到任何位置，而是在您在周圍父組件中指定了 <teleport> 的位置渲染。

  1.   <teleport to="#popup" :disabled="displayVideoInline">
  2.     <video src="./my-movie.mp4">
  3.   </teleport>

請(qǐng)注意，這將移動(dòng)實(shí)際的 DOM 節(jié)點(diǎn)，而不是被銷毀和重新創(chuàng)建，并且它還將保持任何組件實(shí)例的活動(dòng)狀態(tài)。所有有狀態(tài)的 HTML 元素 (即播放的視頻) 都將保持其狀態(tài)。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)