vue3のテレポート瞬間移動機能の使い方を詳しく解説

vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。

テレポートは通常、瞬間テレポートコンポーネントと翻訳されますが、実際には理解するのが難しいです。私は「独立したコンポーネント」と理解しています。

書き込んだコンポーネントを任意の DOM にマウントできるため、非常に自由かつ独立しています。

例: ポップアップコンポーネントの作成

<テンプレート>
<テレポート先="#modal">
 <div id="center" v-if="isOpen">
 <h2><slot>これはモーダルです</slot></h2>
 <button @click="buttonClick">閉じる</button>
 </div>
</テレポート>
</テンプレート>
<script lang="ts">

エクスポートデフォルト{
 小道具: {
 isOpen: ブール値、
 },
 放出：
 'クローズモーダル': null
 },
 セットアップ(プロパティ、コンテキスト) {
 const ボタンクリック = () => {
 context.emit('モーダルを閉じる')
 }
 戻る {
 ボタンクリック
 }
 }
}
</スクリプト>
<スタイル>
 ＃中心 {
 幅: 200ピクセル;
 高さ: 200px;
 境界線: 2px 黒一色;
 背景: 白;
 位置: 固定;
 左: 50%;
 上位: 50%;
 左マージン: -100px;
 上マージン: -100px;
 }
</スタイル>

app.vue で使用する場合は、通常のコンポーネントを呼び出すのと同じです。

<テンプレート>
<div id="アプリ">
 <img alt="Vue ロゴ" src="./assets/logo.png">
 <HelloWorld msg="Vue.js アプリへようこそ"/>
 <フックデモ></フックデモ>
 <button @click="openModal">モーダルを開く</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> 私のモーダル !!!!</modal>
</div>
 
</テンプレート>
<スクリプト>
'./components/HelloWorld.vue' から HelloWorld をインポートします。
'./components/HooksDemo.vue' から HooksDemo をインポートします。
'./components/Modal.vue' から Modal をインポートします。
'vue' から{ref}をインポートします
エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント:
 こんにちは世界、
 フックデモ、
 モーダル
 },
 設定（） {
 定数 modalIsOpen = ref(false)
 定数オープンモーダル = () => {
 modalIsOpen.値 = true
 }
 定数onModalClose = () => {
 modalIsOpen.値 = false
 }
 戻る {
 モーダルが開いている、
 オープンモーダル、
 オンモーダルクローズ
 }
 }
}
</スクリプト>

<スタイル>
＃アプリ {
 フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
 -webkit-font-smoothing: アンチエイリアス;
 -moz-osx-font-smoothing: グレースケール;
 テキスト配置: 中央;
 色: #2c3e50;
 上マージン: 60px;
}
</スタイル>

app.vueファイルで使用する場合、モーダルはアプリのDOMノードの下にあり、親ノードのDOM構造とCSSがモーダルに影響し、問題が発生します。

1. モーダルは他のコンポーネントでラップされており、簡単に干渉される
2. スタイルは他のコンポーネントにも存在するため、非常に混乱しやすくなります。

Teleport は、モーダルコンポーネントを #app 内にネストする必要がないため、相互に干渉することなく、レンダリングしたい外部 DOM にモーダルコンポーネントをレンダリングできます。Teleportは、コンポーネントを任意の場所に転送するためのポータルと考えることができます。これを使用する場合、 to属性によって、コンポーネントをマウントする DOM ノードを決定できます。

<テンプレート>
 <テレポート先="#modal">
 <div id="center">
 <h2>より良い</h2>
 </div>
 </テレポート>
</テンプレート>

publicフォルダの下のindex.htmlにノードを追加します。

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
 <メタ文字セット="utf-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅,初期スケール=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" >
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <本文>
 <スクリプトなし>
 <strong>申し訳ありませんが、JavaScript が有効になっていないと <%= htmlWebpackPlugin.options.title %> は正しく動作しません。続行するには JavaScript を有効にしてください。</strong>
 </noscript>
 <div id="アプリ"></div>
 <div id="モーダル"></div>
 <!-- ビルドされたファイルは自動的に挿入されます -->
 </本文>
</html>

このように、モーダルコンポーネントがアプリの下にマウントされておらず、アプリコンポーネントの影響を受けていないことがわかります。