Vue3 組み込みコンポーネント

Vue.js には、いくつかの組み込みのグローバルコンポーネントと組み込みコンポーネントがあります。これらは一般的な機能とレイアウトサポートを提供し、開発者がアプリケーションのインターフェースを迅速に構築するのに役立ちます。

以下は、一般的な Vue 組み込みコンポーネントとその役割です：

1. component

<component>抽象的なコンポーネントで、異なるコンポーネントや要素を動的にレンダリングするために使用されます。

バインディングを介してis属性を使用すると、動的なコンポーネントの切り替えとレンダリングを実現できます。

<component :is="currentComponent"></component>

2. transitionとtransition-group

<transition>と<transition-group>Vue.js でトランジションやアニメーション効果を実現する機能を提供します。

トランジションの CSS クラス名を定義することで、要素が DOM に出入りする際のアニメーション効果を制御できます。

<transition name="fade">
  <div v-if="show">Hello!</div>
</transition>

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

3. keep-alive

<keep-alive>抽象的なコンポーネントで、コンポーネントの状態を保持したり、複数回のレンダリングを回避したりするために使用されます。

コンポーネントが<keep-alive>ラップされると、その状態はキャッシュされ、切り替えのたびに再レンダリングされることはありません。

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

4. slot

<slot>Vue.js でコンテンツを挿入するためのスロットコンポーネントです。親コンポーネントが子コンポーネントのコンテンツを特定のスロット位置に渡すことを可能にし、コンポーネントをより柔軟で再利用可能にします。

<child-component>
  <template #header>
    <h2>Header Content</h2>
  </template>
  <template #default>
    <p>Default Content</p>
  </template>
</child-component>

5. teleport

<teleport>DOM 要素を、現在の DOM 構造に制限されることなく、アプリケーションの任意の場所にレンダリングできます。これは、アプリケーション内で要素を動的に移動する必要がある場合、例えばモーダルボックス内にポップアップコンテンツをレンダリングする場合に非常に便利です。

<teleport to="body">
  <modal-dialog v-if="showModal">
    <!-- modal content -->
  </modal-dialog>
</teleport>

6. Suspense

<Suspense>Vue.js 3.x で新しく追加されたコンポーネントで、非同期コンポーネントの読み込みと状態を処理するために使用されます。非同期コンポーネントの読み込みが完了する前にプレースホルダーコンテンツを表示し、読み込み状態とエラーを処理できます。

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>