Vue の新しい組み込みコンポーネントの使用方法の詳細な説明

1. テレポート

テレポート公式ドキュメント

1.1 テレポートの紹介

1. Vue は、UI と関連する動作をコンポーネントにカプセル化することで UI を構築することを推奨します。これらを互いにネストして、アプリケーションの UI を構成するツリーを構築できます。

2. ただし、コンポーネントテンプレートの一部が論理的にそのコンポーネントに属している場合があり、技術的な観点からは、テンプレートのこの部分を DOM 内の別の場所、つまり Vue アプリケーションの外部に移動する方が適切です。

上記はわかりにくいように見えますか? これは、公式文書から翻訳したものです。

実際、Teleport は Vue アプリの外部にコンポーネントをマウントするものだと私は理解しています。ご存知のとおり、Vue は SPA (シングルページ) アプリケーションです。すべてのレンダリングは、ID が app のタグ内で行われます。この場合、app と同じレベルでコンポーネントを作成し、teleport タグを介して参照して、どのページでも使用できるようにします。

1.2 テレポートの使用

1. ここでグローバルモーダルボックスも実装します

2. 親子コンポーネント通信メカニズムを介してテレポートマウント機能を使用する

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>Vite アプリ</title>
  </head>
  <本文>
    <div id="アプリ"></div>
    <div id="modal"></div> <!-- アプリと同じレベルでタグモーダルを定義します -->
    <script type="module" src="/src/main.ts"></script>
  </本文>
</html>

モーダルコンポーネントを定義する

<テンプレート>
	<!-- teleport には to 属性があり、id が modal のタグに付加されています -->
    <テレポート先="#modal">
        <div id="center" v-if="isOpen">
            <div class="modal-header" v-if="title">
                <h2>{{ タイトル }}</h2>
                <時間 />
            </div>
            <div class="modal-content">
                <!-- 外部コンテンツの挿入をサポートするためにスロットを使用します -->
                <スロット></スロット>
            </div>
            <button @click="buttonClick">閉じる</button>
        </div>
    </テレポート>
</テンプレート>
<script lang="ts">
// defineProps<{ msg: string }>() Vue3 セットアップはプロパティを定義します
'vue' から defineComponent をインポートします。
エクスポートデフォルトdefineComponent({
    小道具: {
        isOpen: ブール値、
        タイトル: 文字列
    },
    // 出力を検証: {
        'クローズモーダル': null
        // (ペイロード: 任意) => {
        // payload.type === 'close' を返す
        // }
    },
    セットアップ(プロパティ、コンテキスト) {
        const ボタンクリック = () => {
            context.emit('モーダルを閉じる');
        }
        戻る {
            ボタンクリック
        }
    }
});
</スクリプト>
<スタイル>
＃中心 {
    幅: 200ピクセル;
    高さ: 200px;
    境界線: 2px 黒一色;
    背景色: 白;
    位置: 固定;
    左: 50%;
    上位: 50%;
    変換: translate(-50%, -50%);
}
</スタイル>

3. モーダルコンポーネントを使用する

<スクリプト設定 lang="ts">
'vue' から { ref } をインポートします。
'./components/Modal.vue' から Modal をインポートします。
const modalTitle = ref('Hello, World');
modalIsOpen を ref(false) に設定します。
定数オープンモーダル = () => {
  modalIsOpen.値 = true;
}
定数onModalClose = () => {
  modalIsOpen.値 = false;
}
</スクリプト>
<テンプレート>
  <img alt="Vue ロゴ" src="./assets/logo.png" />
  <div class="test-useURLLoader">
    <button @click="openModal">モーダル</button>
    <モーダル:title="modalTitle" :isOpen="modalIsOpen" @close-modal="onModalClose">
      私のモデル
    </モーダル>
  </div>
</テンプレート>
<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

1.3 プレビュー効果

画像の説明を追加してください

2. サスペンス

サスペンス公式ドキュメント

Waring : Vue3 の実験的な機能であるため、いつでも変更される可能性があるため、実稼働環境での使用は推奨されません。

2.1 サスペンスの紹介

非同期データに使用できます。さまざまな状況に適応するためのローカル処理方法があり、2つの選択肢（読み込み完了と失敗のスロット）を提供します。

より詳しい情報は、公式ドキュメントを自分で読んでみてください。ここではその中からいくつか抜粋しました。

2.2 サスペンスの使用

1. 非同期効果を実現するために、Promise を使用して非同期操作を実装できます。

2. 次のコンポーネントAsyncShow.vueコンポーネントを定義します。

<テンプレート>
	<!-- データを表示するには 3 秒待ちます -->
    <h1>{{ 結果 }}</h1>
</テンプレート>
<script lang="ts">
'vue' から defineComponent をインポートします。
エクスポートデフォルトdefineComponent({
    設定（） {
        新しいPromise((resolve) => {を返す
            タイムアウトを設定する(() => {
                解決を返す({
                    結果: 43
                })
            }, 3000);
        });
    }
});
</スクリプト>
<スタイル>
</スタイル>

3. App.vueでこのコンポーネントを使用する

<スクリプト設定 lang="ts">
'./components/AsyncShow.vue' から AsyncShow をインポートします。
</スクリプト>
<テンプレート>
  <img alt="Vue ロゴ" src="./assets/logo.png" />
  <div class="test-useURLLoader">
    <!-- Promise が完了していない場合は、Loding... と表示されます。Promise が完了すると、値が表示されます -->
    <サスペンス>
      <テンプレート #デフォルト>
        <非同期表示 />
      </テンプレート>
      <テンプレート #フォールバック>
        <h2>
          読み込み中...
        </h2>
      </テンプレート>
    </サスペンス>
  </div>
</テンプレート>
<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>