Heim > Artikel > Web-Frontend > Was sind die integrierten Komponenten von Vue?
Was sind die integrierten Komponenten von Vue?
- 青灯夜游Original
- 2022-12-22 19:14:435949Durchsuche
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 */
})1, Komponente
-
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>
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-stringleave-from-class-stringappear-class-stringenter-to-class-stringleave-to-class-stringappear-to-class-stringenter-active-class-stringleave-active-class-stringappear-active-class-string -
事件：
before-enterbefore-leaveenterleaveappearafter-enterafter-leaveafter-appearenter-cancelledleave-cancelled(仅v-show)appear-cancelled - 用法：
300ff3b250bc578ac201dd5fb34a0004 元素作为单个元素/组件的过渡效果。300ff3b250bc578ac201dd5fb34a0004 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 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 和300ff3b250bc578ac201dd5fb34a0004相同。 -
事件：
事件和300ff3b250bc578ac201dd5fb34a0004相同。 - 用法：
5c8969d1376a171e8b0ec4a1c01f185d 元素作为多个元素/组件的过渡效果。5c8969d1376a171e8b0ec4a1c01f185d 渲染一个真实的 DOM 元素。默认渲染 45a2772a6b6107b401db3c9b82c049c2，可以通过 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>🎜🎜2, Übergang🎜🎜🎜🎜🎜🎜Props: 🎜🎜🎜🎜🎜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-leave🎜
enter🎜 verlassen🎜erscheinen🎜nach dem Eintreten🎜🎜nach dem Verlassen🎜🎜nach dem Erscheinen🎜 🎜enter-storniert🎜verlassen-storniert (nur v-show)🎜erscheinen-storniert🎜🎜🎜Verwendung: 🎜🎜300ff3b250bc578ac201dd5fb34a0004 Element fungiert als Übergangseffekt für ein 🎜einzelnes 🎜 Element/eine Komponente. 300ff3b250bc578ac201dd5fb34a0004 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>rrree🎜🎜3, Übergangsgruppe🎜🎜🎜🎜🎜Props: 🎜🎜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 300ff3b250bc578ac201dd5fb34a0004. 🎜🎜🎜🎜Ereignis: Das 🎜🎜-Ereignis ist dasselbe wie 300ff3b250bc578ac201dd5fb34a0004. 🎜🎜Verwendung: 🎜🎜5c8969d1376a171e8b0ec4a1c01f185d-Element fungiert als Übergangseffekt für 🎜mehrere 🎜 Elemente/Komponenten. 5c8969d1376a171e8b0ec4a1c01f185d rendert ein echtes DOM-Element. 45a2772a6b6107b401db3c9b82c049c2 wird standardmäßig gerendert. Sie können über das Attribut tag konfigurieren, welches Element gerendert werden soll. 🎜注意，每个 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="['a', 'b']">
<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() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。
【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!