Vue の組み込みコンポーネントは何ですか?

Vue コンポーネントには次のものが含まれます。 1. コンポーネント。「メタ コンポーネント」を動的コンポーネントとしてレンダリングするために使用されます。 2. トランジション。単一の要素またはコンポーネントにアニメーション化されたトランジション効果を提供するために使用されます。 3. トランジション グループ。リスト内の複数の要素またはコンポーネントにトランジション効果を提供するために使用されます。 4. キープアライブ。ラップされた動的スイッチング コンポーネントをキャッシュするために使用されます。 5.スロット。 6. テレポート。スロットの内容を DOM 内の別の場所にレンダリングするために使用されます。 7.サスペンス。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

組み込みコンポーネントは、登録せずにテンプレートで直接使用できます。これらはツリーシェイキング可能でもあり、使用時にのみビルドに含まれます。

レンダリング関数で使用する場合は、明示的にインポートする必要があります。例:

import { h, Transition } from 'vue'

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

1、コンポーネント

• プロパティ:

  is - string | Component

• Usage:

「メタ コンポーネント」を動的コンポーネントとしてレンダリングします。

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、トランジション

• 小道具:

  # #name - string は、CSS 遷移クラス名を自動的に生成するために使用されます。例: name: 'fade' は、.fade-enter、.fade-enter-active などに自動的に展開されます。

  appeared - boolean、最初のレンダリング中にトランジションを使用するかどうか。デフォルトは false です。
  

  永続 - ブール値。 true の場合、これは実際には要素の挿入/削除ではなく、表示/非表示状態を切り替える変換であることを意味します。トランジションフックは挿入されますが、レンダラーはそれをスキップします。代わりに、カスタム ディレクティブは、挿入されたフック (例: v-show) を呼び出すことで変換を制御できます。

  css - ブール値。 CSS 遷移クラスを使用するかどうか。デフォルトは true です。 false に設定すると、登録された JavaScript フックのみがコンポーネント イベント経由で起動されます。

  タイプ - 文字列。遷移イベント タイプを指定し、遷移がいつ終了するかをリッスンします。有効な値は、"transition" および "animation" です。デフォルトでは、Vue.js は長時間持続する遷移イベント タイプを自動的に検出します。

  mode - string トランジションの終了/開始の時間シーケンスを制御します。有効なモードは "out-in" と "in-out" で、両方ともデフォルトで実行されます。

  duration - number | { を入力: 番号、 を残す: 番号 }。トランジションの継続時間を指定します。デフォルトでは、Vue はトランジションが配置されているルート要素の最初の transitionend または animationend イベントを待ちます。

  クラスから入る - 文字列

  クラスから離れる - 文字列

  出現クラス - 文字列

  クラスに入る - 文字列

  クラスから離れる - string

  クラスに表示 - string

  アクティブクラスに入る - string

  leave-active-class - string

  apper-active-class - string

• イベント:

  ##入場前##退出前

  入力
  

  残す

  表示

  入力後

  退出後

  出現後

  入力キャンセル

  退出キャンセル (

  v-show のみ)表示キャンセル
  使用法:
• #<transition>
要素は、

単一の

要素/コンポーネントのトランジション効果として機能します。 <transition> トランジション効果は、ラップするコンテンツにのみ適用されます。追加の 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) {
        // 因为传递了'el'的DOM元素作为参数
      }
    }
    ...
  })
  
  app.mount('#transition-demo')

3、transition-group

Props:

• tag - string

  、デフォルトは スパンです。 move-class - 移動遷移中に適用される CSS クラスをオーバーライドします。

  mode を除き、他の属性は <transition>

  と同じです。

  イベント:
• イベントは

  <transition> と同じです。

  使用法:
• <transition-group>
要素は、

複数の

要素のトランジションとして機能します/コンポーネントの効果。 <transition-group> 実際の DOM 要素をレンダリングします。 はデフォルトでレンダリングされます。どの要素をレンダリングするかは、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() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。

[関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

以上がVue の組み込みコンポーネントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。