首頁 > 文章 > web前端 > vue內建元件有哪些

vue內建元件有哪些

青灯夜游原創: 2022-12-22 19:14:435957瀏覽

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

vue內建元件有哪些

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

內建元件不需註冊便可直接在範本中使用。它們也是 tree-shakeable 的：僅在使用時才會包含在建置中。

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

import { h, Transition } from &#39;vue&#39;

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 ? &#39;FooComponent&#39; : &#39;BarComponent&#39;"></component>
  
  <!-- 可以用来渲染原生 HTML 元素 -->
  <component :is="href ? &#39;a&#39; : &#39;span&#39;"></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
leave- cancelled

v-show

)appear-cancelled##用法：

300ff3b250bc578ac201dd5fb34a0004

單一元素/元件的過渡效果。 300ff3b250bc578ac201dd5fb34a0004
只會將過渡效果套用到其包裝的內容上，而不會額外渲染 DOM 元素，也不會出現在可被檢查的元件層級中。 <pre class="brush:js;toolbar:false;" >  <component :is="componentId"></component>  <component :is="$options.components.child"></component>  <component :is="condition ? &#39;FooComponent&#39; : &#39;BarComponent&#39;"></component>  <component :is="href ? &#39;a&#39; : &#39;span&#39;"></component></pre><pre class="prettyprint linenums prettyprinted" > const app = Vue.createApp({ ... methods: { transitionComplete (el) { // 因为传递了&#39;el&#39;的DOM元素作为参数 } } ... }) app.mount(&#39;#transition-demo&#39;)</pre>3、transition-group
#Props：
##tag - string ，預設為span
。
move-class
- 覆寫在移動過渡期間所應用的 CSS 類別。除了 mode
，其他 attribute 和 300ff3b250bc578ac201dd5fb34a0004 相同。

事件和 300ff3b250bc578ac201dd5fb34a0004 相同。 用法：5c8969d1376a171e8b0ec4a1c01f185d

元素作為###多個###元素/元件的過渡效果。 ###5c8969d1376a171e8b0ec4a1c01f185d### 渲染一個真實的 DOM 元素。預設渲染 ###45a2772a6b6107b401db3c9b82c049c2###，可以透過 ###tag### attribute 設定哪個元素應該被渲染。 ###

注意，每个 5c8969d1376a171e8b0ec4a1c01f185d 的子节点必须有独立的 key，动画才能正常工作

5c8969d1376a171e8b0ec4a1c01f185d 支持通过 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。最多可以缓存多少组件实例。
用法：

7c9485ff8c3cba5ae9343ed63c2dc3f7 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 300ff3b250bc578ac201dd5fb34a0004 相似，7c9485ff8c3cba5ae9343ed63c2dc3f7 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 7c9485ff8c3cba5ae9343ed63c2dc3f7 内被切换，它的 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>

注意，7c9485ff8c3cba5ae9343ed63c2dc3f7 是用在其一个直属的子组件被切换的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，7c9485ff8c3cba5ae9343ed63c2dc3f7 要求同时只有一个子元素被渲染。

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="[&#39;a&#39;, &#39;b&#39;]">
    <component :is="view"></component>
  </keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

  <keep-alive :max="10">
    <component :is="view"></component>
  </keep-alive>

7c9485ff8c3cba5ae9343ed63c2dc3f7 不会在函数式组件中正常工作，因为它们没有缓存实例。

5、slot

Props：

name - string，用于具名插槽
用法：

58cb293b8600657fad49ec2c8d37b472 元素作为组件模板之中的内容分发插槽。58cb293b8600657fad49ec2c8d37b472 元素自身将被替换。

6、teleport

Props：

to - string。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 6c123bcf29012c05eda065ba23259dcb 内容的目标元素

  <!-- 正确 -->
  <teleport to="#some-id" />
  <teleport to=".some-class" />
  <teleport to="[data-teleport]" />
  
  <!-- 错误 -->
  <teleport to="h1" />
  <teleport to="some-string" />

disabled - boolean。此可选属性可用于禁用 6c123bcf29012c05eda065ba23259dcb 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 6c123bcf29012c05eda065ba23259dcb 的位置渲染。

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

请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。

7、Suspense

用于协调对组件树中嵌套的异步依赖的处理。

Props

interface SuspenseProps {
  timeout?: string | number
}

事件

@resolve

@pending

@fallback
详细信息

bb06e69d307cb52103d07d8f9dd385e5 接受两个插槽：#default 和 #fallback。它将在内存中渲染默认插槽的同时展示后备插槽内容。

如果在渲染时遇到异步依赖项 (异步组件和具有 async setup() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。

【相關推薦：vuejs影片教學、web前端開發】

以上是vue內建元件有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css 正则表达式 vue.js html String Boolean Array for include 字符串 class Attribute Property JS number regexp 事件 default dom 异步选择器 transform transition animation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：vue項目名可以用中文嗎下一篇：vue項目名可以用中文嗎

看更多