vue內建元件有哪些 - tw511教學網

vue元件有：1、component，用於渲染一個「元元件」為動態元件。2、transition，用於為單個元素或元件提供動畫過渡效果。3、transition-group，用於為列表中的多個元素或元件提供過渡效果。4、keep-alive，用於快取包裹在其中的動態切換元件。5、slot。6、teleport，用於將其插槽內容渲染到DOM中的另一個位置。7、Suspense。

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

內建元件無需註冊便可以直接在模板中使用。它們也是 tree-shakeable 的：僅在使用時才會包含在構建中。

在渲染函數中使用它們時，需要顯式匯入。例如：

import { h, Transition } from 'vue'

h(Transition, {
  /* props */
})
登入後複製

1、component

Props：
is - string | Component
用法：

渲染一個「元元件」為動態元件。依 is 的值，來決定哪個元件被渲染。is 的值是一個字串，它既可以是 HTML 標籤名稱也可以是元件名稱。

  <!--  動態元件由 vm 範例的 `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，是否在初始渲染時使用過渡。預設為 false。
persisted - boolean。如果是 true，表示這是一個不真實插入/刪除元素的轉換，而是切換顯示/隱藏狀態。過渡勾點被注入，但渲染器將跳過。相反，自定義指令可以通過呼叫注入的勾點 (例如 v-show) 來控制轉換。
css - boolean。是否使用 CSS 過渡類。預設為 true。如果設定為 false，將只通過元件事件觸發註冊的 JavaScript 勾點。
type - string。指定過渡事件型別，偵聽過渡何時結束。有效值為 "transition" 和 "animation"。預設 Vue.js 將自動檢測出持續時間長的為過渡事件型別。
mode - string 控制離開/進入過渡的時間序列。有效的模式有 "out-in" 和 "in-out"；預設同時進行。
duration - number | { enter : number, leave : number }。指定過渡的持續時間。預設情況下，Vue 會等待過渡所在根元素的第一個 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> 元素作為單個元素/元件的過渡效果。<transition> 只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出現在可被檢查的元件層級中。

  <!--  動態元件由 vm 範例的 `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) {
        // 因為傳遞了'el'的DOM元素作為引數
      }
    }
    ...
  })
  
  app.mount('#transition-demo')
登入後複製

3、transition-group

Props：
tag - string，預設為 span。
move-class - 覆蓋移動過渡期間應用的 CSS 類。
除了 mode，其他 attribute 和 <transition> 相同。
事件：
事件和 <transition> 相同。
用法：

<transition-group> 元素作為多個元素/元件的過渡效果。<transition-group> 渲染一個真實的 DOM 元素。預設渲染 <span>，可以通過 tag attribute 設定哪個元素應該被渲染。

注意，每個 <transition-group> 的子節點必須有獨立的 key，動畫才能正常工作

<transition-group> 支援通過 CSS transform 過渡移動。當一個子節點被更新，從螢幕上的位置發生變化，它會被應用一個移動中的 CSS 類 (通過 name attribute 或設定 move-class attribute 自動生成)。如果 CSS transform property 是「可過渡」property，當應用移動類時，將會使用 FLIP 技術使元素流暢地到達動畫終點。

  <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。最多可以快取多少元件範例。
用法：

<keep-alive> 包裹動態元件時，會快取不活動的元件範例，而不是銷燬它們。和 <transition> 相似，<keep-alive> 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。

當元件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期勾點函數將會被對應執行。

主要用於保留元件狀態或避免重新渲染。

  <!-- 基本 -->
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
  
  <!-- 多個條件判斷的子元件 -->
  <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> 是用在其一個直屬的子元件被切換的情形。如果你在其中有 v-for 則不會工作。如果有上述的多個條件性的子元素，<keep-alive> 要求同時只有一個子元素被渲染。

include 和 exclude

The include 和 exclude prop 允許元件有條件地快取。二者都可以用逗號分隔字串、正規表示式或一個陣列來表示：

  <!-- 逗號分隔字串 -->
  <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 選項，如果 name 選項不可用，則匹配它的區域性註冊名稱 (父元件 components 選項的鍵值)。匿名元件不能被匹配。

max

最多可以快取多少元件範例。一旦這個數位達到了，在新範例被建立之前，已快取元件中最久沒有被存取的範例會被銷燬掉。

  <keep-alive :max="10">
    <component :is="view"></component>
  </keep-alive>
登入後複製

<keep-alive> 不會在函數式元件中正常工作，因為它們沒有快取範例。

5、slot

Props：
name - string，用於具名插槽
用法：

<slot> 元素作為元件模板之中的內容分發插槽。<slot> 元素自身將被替換。

6、teleport

Props：

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

  <!-- 正確 -->
  <teleport to="#some-id" />
  <teleport to=".some-class" />
  <teleport to="[data-teleport]" />
  
  <!-- 錯誤 -->
  <teleport to="h1" />
  <teleport to="some-string" />
登入後複製

disabled - boolean。此可選屬性可用於禁用 <teleport> 的功能，這意味著其插槽內容將不會移動到任何位置，而是在您在周圍父元件中指定了 <teleport> 的位置渲染。

  <teleport to="#popup" :disabled="displayVideoInline">
    <video src="./my-movie.mp4">
  </teleport>
登入後複製

請注意，這將移動實際的 DOM 節點，而不是被銷燬和重新建立，並且它還將保持任何元件範例的活動狀態。所有有狀態的 HTML 元素 (即播放的視訊) 都將保持其狀態。

7、Suspense

用於協調對元件樹中巢狀的非同步依賴的處理。

Props

interface SuspenseProps {
  timeout?: string | number
}
登入後複製

事件
@resolve
@pending
@fallback
詳細資訊

<Suspense> 接受兩個插槽：#default 和 #fallback。它將在記憶體中渲染預設插槽的同時展示後備插槽內容。

如果在渲染時遇到非同步依賴項 (非同步元件和具有 async setup() 的元件)，它將等到所有非同步依賴項解析完成時再顯示預設插槽。

【相關推薦：、】

以上就是vue內建元件有哪些的詳細內容，更多請關注TW511.COM其它相關文章！