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 */
})#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>
#Props：
# #name - string 用於自動產生CSS 過渡類別名稱。例如：name: 'fade' 將自動拓展為 .fade-enter
，
等。 - boolean，是否在初始渲染時使用過渡。預設為 false。 persisted - boolean。如果是 true，表示這是一個不真實插入/刪除元素的轉換，而是切換顯示/隱藏狀態。過渡鉤子被注入，但渲染器將跳過。相反，自訂指令可以透過呼叫注入的鉤子 (例如
) 來控制轉換。 css - boolean。是否使用 CSS 過渡類別。預設為 true。如果設定為 false，將只透過元件事件觸發註冊的 JavaScript 鉤子。 type - string。指定過渡事件類型，偵聽過渡何時結束。有效值為 "transition" 和
。預設 Vue.js 將自動偵測出持續時間長的為過渡事件類型。 mode - string 控制離開/進入過渡的時間序列。有效的模式有 "out-in" 和 "in-out"；預設同時進行。 - number | { enter : number, leave
。指定過渡的持續時間。預設情況下，Vue 會等待過渡所在根元素的第一個 transitionend 或 animationend 事件。 enter-from-class - string
- string appear-class - string
- stringleave-to-class - string
- stringenter-active-class - string
- string
#appear-active-class - string
事件：
#before-enter
leave
#appear
after-enter
after-leaveafter-appear
)appear-cancelled##用法：
只會將過渡效果套用到其包裝的內容上，而不會額外渲染 DOM 元素，也不會出現在可被檢查的元件層級中。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;" > <!-- 动态组件由 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></pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint linenums prettyprinted" > const app = Vue.createApp({
...
methods: {
transitionComplete (el) {
// 因为传递了&#39;el&#39;的DOM元素作为参数
}
}
...
})
app.mount(&#39;#transition-demo&#39;)</pre><div class="contentsignin">登入後複製</div></div>3、transition-group
#Props：##tag - string ，預設為span
- 覆寫在移動過渡期間所應用的 CSS 類別。 除了 mode
，其他 attribute 和<transition> 相同。 事件和 <transition> 相同。 用法：<transition-group>
注意，每个 <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>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 和 excludeThe 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> 不会在函数式组件中正常工作，因为它们没有缓存实例。
Props：
name - string，用于具名插槽
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
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 元素 (即播放的视频) 都将保持其状态。
用于协调对组件树中嵌套的异步依赖的处理。
Props
interface SuspenseProps {
timeout?: string | number
}事件
@resolve
@pending
@fallback
详细信息
如果在渲染时遇到异步依赖项 (异步组件和具有 async setup() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。
以上是vue內建元件有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
