recherche

Maison  >  Article  >  interface Web  >  Quels sont les composants intégrés de Vue ?

Quels sont les composants intégrés de Vue ?

青灯夜游
青灯夜游original
2022-12-22 19:14:435967parcourir

Les composants Vue incluent : 1. un composant, qui est utilisé pour restituer un "méta-composant" en tant que composant dynamique. 2. Transition, utilisée pour fournir des effets de transition animés pour un seul élément ou composant. 3. Groupe de transition, utilisé pour fournir des effets de transition pour plusieurs éléments ou composants de la liste. 4. keep-alive, utilisé pour mettre en cache les composants de commutation dynamique qui y sont enveloppés. 5. emplacement. 6. téléportation, utilisé pour restituer le contenu de son emplacement vers un autre emplacement du DOM. 7.Suspense.

Quels sont les composants intégrés de Vue ?

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Les composants intégrés peuvent être utilisés directement dans les modèles sans inscription. Ils sont également modifiables en arborescence : ils ne sont inclus dans la construction que lorsqu'ils sont utilisés.

Lors de leur utilisation dans les fonctions de rendu, ils doivent être importés explicitement. Par exemple : 

import { h, Transition } from 'vue'

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

1, composant

  • 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 ? &#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

    enter-cancelled

    leave-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 ? &#39;FooComponent&#39; : &#39;BarComponent&#39;"></component>
  
  <!-- 可以用来渲染原生 HTML 元素 -->
  <component :is="href ? &#39;a&#39; : &#39;span&#39;"></component>
  const app = Vue.createApp({
    ...
    methods: {
      transitionComplete (el) {
        // 因为传递了&#39;el&#39;的DOM元素作为参数
      }
    }
    ...
  })
  
  app.mount(&#39;#transition-demo&#39;)

3、transition-group

  • Props：

    tag - string，默认为 span。

    move-class - 覆盖移动过渡期间应用的 CSS 类。

    除了 mode，其他 attribute 和 300ff3b250bc578ac201dd5fb34a0004 相同。

  • 事件：

    事件和 300ff3b250bc578ac201dd5fb34a0004 相同。
  • 用法：

5c8969d1376a171e8b0ec4a1c01f185d 元素作为多个元素/组件的过渡效果。5c8969d1376a171e8b0ec4a1c01f185d 渲染一个真实的 DOM 元素。默认渲染 45a2772a6b6107b401db3c9b82c049c2，可以通过 tag

🎜Utilisation : 🎜 li >🎜Rendu un "méta-composant" en tant que composant dynamique. Le composant rendu dépend de la valeur de is. La valeur de is est une chaîne, qui peut être soit un nom de balise HTML, soit un nom de composant. 🎜
  <transition-group tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </transition-group>
🎜🎜2, transition🎜🎜🎜🎜🎜🎜Props : 🎜🎜🎜🎜🎜name - string est utilisé pour générer automatiquement les noms de classes de transition CSS. Par exemple : name : 'fade' se développera automatiquement en .fade-enter, .fade-enter-active, etc. 🎜🎜apparaître - booléen, s'il faut utiliser la transition lors du rendu initial. La valeur par défaut est false.
🎜persisté - booléen. Si c'est vrai, cela signifie qu'il s'agit d'une transformation qui n'insère/supprime pas réellement d'éléments, mais change l'état afficher/masquer. Le hook de transition est injecté, mais le moteur de rendu l'ignore. Au lieu de cela, les directives personnalisées peuvent contrôler les transformations en appelant des hooks injectés (tels que v-show). 🎜css - booléen. S'il faut utiliser des classes de transition CSS. La valeur par défaut est true. S'il est défini sur false, seuls les hooks JavaScript enregistrés seront déclenchés via les événements de composant. 🎜type - chaîne. Spécifiez le type d'événement de transition et écoutez quand la transition se termine. Les valeurs valides sont "transition" et "animation". Par défaut, Vue.js détectera automatiquement les types d'événements de transition de longue durée. 🎜mode - string Contrôle la séquence temporelle des transitions de sortie/entrée. Les modes valides sont "out-in" et "in-out", les deux étant exécutés par défaut. 🎜durée - numéro | entrez  : numéro, laissez  : numéro }. Spécifiez la durée de la transition. Par défaut, Vue attend le premier événement transitionend ou animationend de l'élément racine où se trouve la transition. 🎜enter-from-class - string🎜leave-from-class - string🎜apparaître- class - string🎜entrer en classe - string🎜sortir en classe - chaîne🎜apparaître à la classe - chaîne🎜enter-active-class - chaîne code>🎜<code>leave-active-class - chaîne🎜apparaître-active-class - chaîne🎜🎜🎜🎜Événement : 🎜🎜🎜🎜🎜avant d'entrer🎜🎜avant de partir
🎜entrer🎜 partir🎜apparaître🎜après-entrée🎜🎜après-partir🎜🎜après-apparaître🎜 🎜entrée-annulée🎜congé-annulé (uniquement v-show)🎜apparait-annulé🎜🎜🎜Utilisation : l'élément 🎜🎜300ff3b250bc578ac201dd5fb34a0004 agit comme un effet de transition pour un 🎜single 🎜 élément/composant. 300ff3b250bc578ac201dd5fb34a0004 appliquera uniquement l'effet de transition à son contenu encapsulé, sans restituer les éléments DOM supplémentaires et n'apparaissant pas dans la hiérarchie des composants qui peut être inspectée. 🎜
  <!-- 基本 -->
  <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, transition-group🎜🎜🎜🎜🎜Props : 🎜🎜tag - string, la valeur par défaut est span. 🎜move-class - Remplace la classe CSS appliquée lors des transitions de déplacement. 🎜À l'exception du mode, les autres attributs sont les mêmes que 300ff3b250bc578ac201dd5fb34a0004. 🎜🎜🎜🎜Événement : L'événement 🎜🎜 est le même que 300ff3b250bc578ac201dd5fb34a0004. 🎜🎜Utilisation : l'élément 🎜🎜5c8969d1376a171e8b0ec4a1c01f185d agit comme un effet de transition pour 🎜plusieurs 🎜 éléments/composants. 5c8969d1376a171e8b0ec4a1c01f185d restitue un véritable élément DOM. 45a2772a6b6107b401db3c9b82c049c2 est rendu par défaut. Vous pouvez configurer quel élément doit être rendu via l'attribut tag. 🎜

注意，每个 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() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。

【Recommandations associées : tutoriel vidéo vuejs, développement web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css 正则表达式 vue.js html String Boolean Array for include 字符串 class Attribute Property JS number regexp 事件 default dom 异步 选择器 transform transition animation
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le nom du projet Vue peut-il être en chinois ?Article suivant：Le nom du projet Vue peut-il être en chinois ?

Articles Liés

Voir plus