What are the built-in components of Vue?

Vue components include: 1. component, used to render a "meta component" as a dynamic component. 2. Transition, used to provide animated transition effects for a single element or component. 3. Transition-group, used to provide transition effects for multiple elements or components in the list. 4. keep-alive, used to cache dynamic switching components wrapped in it. 5. slot. 6. teleport, used to render its slot content to another location in the DOM. 7.Suspense.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Built-in components can be used directly in templates without registration. They are also tree-shakeable: they are only included in the build when used.

When using them in rendering functions, they need to be imported explicitly. For example:

import { h, Transition } from 'vue'

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

1, component

• Props:

  is - string | Component

• Usage:

Render a "meta component" as a dynamic component. Determine which component is rendered based on the value of is. The value of is is a string, which can be either an HTML tag name or a component name.

  <!--  动态组件由 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 is used to automatically generate CSS transition class names. For example: name: 'fade' will automatically expand to .fade-enter, .fade-enter-active, etc.

  appear - boolean, whether to use transition during initial rendering. Default is false.
  

  persisted - boolean. If true, it means that this is a transformation that does not actually insert/delete elements, but switches the show/hide state. The transition hook is injected, but the renderer skips it. Instead, custom directives can control transformations by calling injected hooks (e.g. v-show).

  css - boolean. Whether to use CSS transition classes. Default is true. If set to false, only registered JavaScript hooks will be fired via component events.

  type - string. Specify the transition event type and listen for when the transition ends. Valid values ​​are "transition" and "animation". By default Vue.js will automatically detect long-lasting transition event types.

  mode - string Controls the time sequence for leaving/entering transitions. Valid modes are "out-in" and "in-out"; both are performed by default.

  duration - number | { enter : number, leave : number }. Specify the duration of the transition. By default, Vue waits for the first transitionend or animationend event of the root element where the transition is located.

  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

• Event:

  ##before-enter

  ##before-leave

  
  enter

  leave

  appear

  after-enter
  after-leave
  after-appear
  enter-cancelled

  leave- canceled

  (v-show only)appear-cancelled

Usage:

<transition>

element acts as a transition effect for a single element/component. <transition> The transition effect will only be applied to the content it wraps. It will not render additional DOM elements, nor will it appear in the component hierarchy that can be inspected. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;!-- 动态组件由 vm 实例的 `componentId` property 控制 --&gt; &lt;component :is=&quot;componentId&quot;&gt;&lt;/component&gt; &lt;!-- 也能够渲染注册过的组件或 prop 传入的组件--&gt; &lt;component :is=&quot;$options.components.child&quot;&gt;&lt;/component&gt; &lt;!-- 可以通过字符串引用组件 --&gt; &lt;component :is=&quot;condition ? &amp;#39;FooComponent&amp;#39; : &amp;#39;BarComponent&amp;#39;&quot;&gt;&lt;/component&gt; &lt;!-- 可以用来渲染原生 HTML 元素 --&gt; &lt;component :is=&quot;href ? &amp;#39;a&amp;#39; : &amp;#39;span&amp;#39;&quot;&gt;&lt;/component&gt;</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> const app = Vue.createApp({ ... methods: { transitionComplete (el) { // 因为传递了&amp;#39;el&amp;#39;的DOM元素作为参数 } } ... }) app.mount(&amp;#39;#transition-demo&amp;#39;)</pre><div class="contentsignin">Copy after login</div></div>

3、transition-group

Props：
• tag

  - string , default is span. move-class

  - Overrides the CSS class applied during the move transition. Except mode

  , other attributes are the same as <transition>.

• Events:

  events are the same as <transition>

  .
Usage:

<transition-group>

element serves as a transition for multiple elements/components Effect. <transition-group> Renders a real DOM element. <span> is rendered by default, which element should be rendered can be configured through the tag attribute. <p>注意，每个 <code><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>

4、keep-alive

• 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 和 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>

<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

5、slot

• Props：

  name - string，用于具名插槽

• 用法：

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

6、teleport

• 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 元素 (即播放的视频) 都将保持其状态。

7、Suspense

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

• Props

interface SuspenseProps {
  timeout?: string | number
}

• 事件

  @resolve

  @pending

  @fallback

• 详细信息

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

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

[Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What are the built-in components of Vue?. For more information, please follow other related articles on the PHP Chinese website!