Apakah komponen terbina dalam Vue?

Komponen Vue termasuk: 1. komponen, yang digunakan untuk menjadikan "komponen meta" sebagai komponen dinamik. 2. Peralihan, digunakan untuk menyediakan kesan peralihan animasi untuk satu elemen atau komponen. 3. Kumpulan peralihan, digunakan untuk memberikan kesan peralihan untuk berbilang elemen atau komponen dalam senarai. 4. keep-alive, digunakan untuk cache komponen pensuisan dinamik yang dibungkus di dalamnya. 5. slot. 6. teleport, digunakan untuk memaparkan kandungan slotnya ke lokasi lain dalam DOM. 7. Suspen.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Komponen terbina dalam boleh digunakan terus dalam templat tanpa pendaftaran. Ia juga boleh digoncang pokok: ia hanya disertakan dalam binaan apabila digunakan.

Apabila menggunakannya dalam fungsi pemaparan, ia perlu diimport secara eksplisit. Contohnya:

import { h, Transition } from 'vue'

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

1 komponen

• Props:

  is - string | Component

• Penggunaan:

Memberikan "komponen meta" sebagai komponen dinamik. Komponen mana yang dipaparkan bergantung pada nilai is. Nilai is ialah rentetan, yang boleh sama ada nama teg HTML atau nama komponen.

  <!--  动态组件由 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. peralihan

• Props:

  name - string digunakan untuk menjana nama kelas peralihan CSS secara automatik. Contohnya: name: 'fade' akan berkembang secara automatik kepada .fade-enter, .fade-enter-active, dsb.

  appear - boolean, sama ada hendak menggunakan peralihan pada pemaparan awal. Lalai ialah false.
  

  persisted - boolean. Jika benar, ini bermakna bahawa ini ialah transformasi yang sebenarnya tidak memasukkan/memadam elemen, tetapi menukar keadaan tunjukkan/sembunyikan. Cangkuk peralihan disuntik, tetapi pemapar melangkaunya. Sebaliknya, arahan tersuai boleh mengawal transformasi dengan memanggil cangkuk yang disuntik (seperti v-show).

  css - boolean. Sama ada hendak menggunakan kelas peralihan CSS. Lalai ialah true. Jika ditetapkan kepada false, hanya cangkuk JavaScript yang berdaftar akan dicetuskan melalui acara komponen.

  type - string. Tentukan jenis peristiwa peralihan untuk mendengar apabila peralihan tamat. Nilai yang sah ialah "transition" dan "animation". Secara lalai, Vue.js akan mengesan jenis acara peralihan yang tahan lama secara automatik.

  mode - string Mengawal masa peralihan keluar/masuk. Mod yang sah ialah "out-in" dan "in-out"; kedua-duanya dilakukan secara lalai.

  duration - number | { masukkan : number, tinggalkan : number }. Nyatakan tempoh peralihan. Secara lalai, Vue menunggu acara transitionend atau animationend pertama pada elemen akar peralihan.

  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

• Acara:

  before-enter

  before-leave
  

  enter

  leave

  appear

  after-enter

  after-leave

  after-appear

  enter-cancelled

  leave-cancelled (v-show sahaja)

  appear-cancelled

• Penggunaan:

<transition> elemen sebagai kesan peralihan untuk elemen tunggal /komponen . <transition> hanya akan menggunakan kesan peralihan pada kandungan yang dibalutnya, tanpa memaparkan elemen DOM tambahan dan tidak muncul dalam hierarki komponen yang boleh diperiksa.

  <!--  动态组件由 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) {
        // 因为传递了'el'的DOM元素作为参数
      }
    }
    ...
  })
  
  app.mount('#transition-demo')

3. Kumpulan peralihan

• Props:

  tag - string , lalai ialah span.

  move-class - Mengatasi kelas CSS yang digunakan semasa peralihan mudah alih.

  Kecuali mode, atribut lain adalah sama dengan <transition>. Acara

• : Acara

  adalah sama dengan <transition>.
• Penggunaan:

<transition-group> elemen bertindak sebagai kesan peralihan untuk berbilang elemen/komponen. <transition-group> Memaparkan elemen DOM sebenar. <span> dipaparkan secara lalai, elemen yang perlu dipaparkan boleh dikonfigurasikan melalui atribut tag.

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

[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah komponen terbina dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!