Zu den Vue-Komponenten gehören: 1. Komponente, die zum Rendern einer „Metakomponente“ als dynamische Komponente verwendet wird. 2. Übergang, wird verwendet, um animierte Übergangseffekte für ein einzelnes Element oder eine einzelne Komponente bereitzustellen. 3. Übergangsgruppe, wird verwendet, um Übergangseffekte für mehrere Elemente oder Komponenten in der Liste bereitzustellen. 4. Keep-Alive, wird zum Zwischenspeichern der darin eingeschlossenen dynamischen Switching-Komponenten verwendet. 5. Steckplatz. 6. Teleport, wird verwendet, um seinen Slot-Inhalt an einen anderen Ort im DOM zu rendern. 7. Spannung.
Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.
Eingebaute Komponenten können ohne Registrierung direkt in Vorlagen verwendet werden. Sie sind auch baumschüttelbar: Sie werden nur dann in den Build einbezogen, wenn sie verwendet werden.
Bei Verwendung in Renderfunktionen müssen sie explizit importiert werden. Zum Beispiel:
import { h, Transition } from 'vue'
h(Transition, {
/* props */
})Props:
is - string | Componentis - 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，.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 - stringappear-class - string
enter-to-class - stringleave-to-class - string
appear-to-class - stringenter-active-class - string
leave-active-class - stringappear-active-class - string
事件：
before-enter
before-leave
enterleave
appearafter-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')tag - string，默认为 span。
move-class - 覆盖移动过渡期间应用的 CSS 类。除了 mode，其他 attribute 和 <transition> 相同。
事件：
事件和<transition> 相同。<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag
is ab. Der Wert von is ist eine Zeichenfolge, die entweder ein HTML-Tag-Name oder ein Komponentenname sein kann. 🎜 <transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>name – string wird verwendet, um automatisch CSS-Übergangsklassennamen zu generieren. Beispiel: name: 'fade' wird automatisch zu .fade-enter, .fade-enter-active usw. erweitert. 🎜🎜appear – boolean, ob beim ersten Rendern ein Übergang verwendet werden soll. Der Standardwert ist false. persistiert – boolean. Wenn „true“, bedeutet dies, dass es sich um eine Transformation handelt, die nicht tatsächlich Elemente einfügt/löscht, sondern den Ein-/Ausblenden-Status wechselt. Der Übergangs-Hook wird eingefügt, aber der Renderer überspringt ihn. Stattdessen können benutzerdefinierte Anweisungen Konvertierungen steuern, indem sie injizierte Hooks aufrufen (z. B. v-show). 🎜css – boolean. Ob CSS-Übergangsklassen verwendet werden sollen. Der Standardwert ist true. Wenn auf false gesetzt, werden nur registrierte JavaScript-Hooks über Komponentenereignisse ausgelöst. 🎜Typ – Zeichenfolge. Geben Sie den Übergangsereignistyp an, auf den gewartet werden soll, wenn der Übergang endet. Gültige Werte sind "transition" und "animation". Standardmäßig erkennt Vue.js automatisch langlebige Übergangsereignistypen. 🎜mode – string Steuert die zeitliche Abfolge von Ausgangs-/Eingangsübergängen. Gültige Modi sind "out-in" und "in-out"; beide werden standardmäßig ausgeführt. 🎜Dauer - Nummer |. { geben Sie : Nummer ein, lassen Sie : Nummer . Geben Sie die Dauer des Übergangs an. Standardmäßig wartet Vue auf das erste transitionend- oder animationend-Ereignis des Stammelements, in dem sich der Übergang befindet. 🎜enter-from-class - string🎜leave-from-class - string🎜appear- Klasse - string🎜enter-to-class - string🎜leave-to-class - string🎜appear-to-class - string🎜enter-active-class - string</ code>🎜<code>leave-active-class - string🎜appear-active-class - string🎜🎜🎜🎜Ereignis: 🎜🎜🎜🎜🎜before-enter🎜🎜before-leaveenter🎜 verlassen🎜erscheinen🎜nach dem Eintreten🎜🎜nach dem Verlassen🎜🎜nach dem Erscheinen🎜 🎜enter-storniert🎜verlassen-storniert (nur v-show)🎜erscheinen-storniert🎜🎜🎜Verwendung: 🎜🎜<transition> Element fungiert als Übergangseffekt für ein 🎜einzelnes 🎜 Element/eine Komponente. <transition> wendet den Übergangseffekt nur auf den umschlossenen Inhalt an, ohne zusätzliche DOM-Elemente zu rendern und nicht in der Komponentenhierarchie zu erscheinen, die überprüft werden kann. 🎜 <!-- 基本 -->
<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>tag – string, Standard ist span. 🎜move-class – Überschreibt die CSS-Klasse, die bei Bewegungsübergängen angewendet wird. 🎜Mit Ausnahme von mode sind andere Attribute dieselben wie <transition>. 🎜🎜🎜🎜Ereignis: Das 🎜🎜-Ereignis ist dasselbe wie <transition>. 🎜🎜Verwendung: 🎜🎜<transition-group>-Element fungiert als Übergangseffekt für 🎜mehrere 🎜 Elemente/Komponenten. <transition-group> rendert ein echtes DOM-Element. <span> wird standardmäßig gerendert. Sie können über das Attribut tag konfigurieren, welches Element gerendert werden soll. 🎜注意，每个 <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() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。
【Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung】
Das obige ist der detaillierte Inhalt vonWas sind die integrierten Komponenten von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
