這篇文章主要介紹了vue內(nèi)置組件怎么使用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue內(nèi)置組件怎么使用文章都會有所收獲，下面我們一起來看看吧。

目前累計(jì)服務(wù)客戶1000+，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹立企業(yè)形象，為客戶提供網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)絡(luò)營銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。創(chuàng)新互聯(lián)建站始終以務(wù)實(shí)、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對領(lǐng)先技術(shù)的掌握、對創(chuàng)意設(shè)計(jì)的研究、對客戶形象的視覺傳遞、對應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

vue組件有：1、component，用于渲染一個“元組件”為動態(tài)組件。2、transition，用于為單個元素或組件提供動畫過渡效果。3、transition-group，用于為列表中的多個元素或組件提供過渡效果。4、keep-alive，用于緩存包裹在其中的動態(tài)切換組件。5、slot。6、teleport，用于將其插槽內(nèi)容渲染到DOM中的另一個位置。7、Suspense。

內(nèi)置組件無需注冊便可以直接在模板中使用。它們也是 tree-shakeable 的：僅在使用時才會包含在構(gòu)建中。

在渲染函數(shù)中使用它們時，需要顯式導(dǎo)入。例如：

import { h, Transition } from 'vue'

h(Transition, {
  /* props */
})

1、component

• Props：

  is - string | Component

• 用法：

渲染一個“元組件”為動態(tài)組件。依 is 的值，來決定哪個組件被渲染。is 的值是一個字符串，它既可以是 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，是否在初始渲染時使用過渡。默認(rèn)為 false。

  persisted - boolean。如果是 true，表示這是一個不真實(shí)插入/刪除元素的轉(zhuǎn)換，而是切換顯示/隱藏狀態(tài)。過渡鉤子被注入，但渲染器將跳過。相反，自定義指令可以通過調(diào)用注入的鉤子 (例如 v-show) 來控制轉(zhuǎn)換。

  css - boolean。是否使用 CSS 過渡類。默認(rèn)為 true。如果設(shè)置為 false，將只通過組件事件觸發(fā)注冊的 JavaScript 鉤子。

  type - string。指定過渡事件類型，偵聽過渡何時結(jié)束。有效值為 "transition" 和 "animation"。默認(rèn) Vue.js 將自動檢測出持續(xù)時間長的為過渡事件類型。

  mode - string 控制離開/進(jìn)入過渡的時間序列。有效的模式有 "out-in" 和 "in-out"；默認(rèn)同時進(jìn)行。

  duration - number | { enter : number, leave : number }。指定過渡的持續(xù)時間。默認(rèn)情況下，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> 只會把過渡效果應(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> 元素作為多個元素/組件的過渡效果。<transition-group> 渲染一個真實(shí)的 DOM 元素。默認(rèn)渲染 <span>，可以通過 tag attribute 配置哪個元素應(yīng)該被渲染。

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

<transition-group> 支持通過 CSS transform 過渡移動。當(dāng)一個子節(jié)點(diǎn)被更新，從屏幕上的位置發(fā)生變化，它會被應(yīng)用一個移動中的 CSS 類 (通過 name attribute 或配置 move-class attribute 自動生成)。如果 CSS transform property 是“可過渡”property，當(dāng)應(yīng)用移動類時，將會使用 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í)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。

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

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

  <!-- 基本 -->
  <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 允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達(dá)式或一個數(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í)例。一旦這個數(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]" />
  
  <!-- 錯誤 -->
  <teleport to="h2" />
  <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> 接受兩個插槽：#default 和 #fallback。它將在內(nèi)存中渲染默認(rèn)插槽的同時展示后備插槽內(nèi)容。

如果在渲染時遇到異步依賴項(xiàng) (異步組件和具有 async setup() 的組件)，它將等到所有異步依賴項(xiàng)解析完成時再顯示默認(rèn)插槽。

關(guān)于“vue內(nèi)置組件怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue內(nèi)置組件怎么使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：vue內(nèi)置組件怎么使用
網(wǎng)站URL：http://m.rwnh.cn/article44/phosee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App設(shè)計(jì)、做網(wǎng)站、網(wǎng)站策劃、定制網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)