VUE 3 テレポートコンポーネントと使用構文をすぐに使い始める

1. テレポートの紹介

テレポートコンポーネントは、その中のコンテンツの親要素を指定するための簡潔な方法を提供します。簡単に言えば、テレポート内のコンテンツは任意の DOM で制御できるため、使いやすいです。

使用する構文:

<テレポート先="body">
    <div>
   作成するコンテンツ</div>  
</テレポート>

to 属性は、テレポート内のコンテンツが追加される DOM 要素を指定します。タグ名、ID、またはクラス名にすることができます。

//タグ名。上記の例は、タグ名を使用して body 要素に追加されます。
<teleport to="body"></teleport>

//クラス名。例: to=".className"
<teleport to=".className"></teleport>

//id 名 <teleport to="#idName"></teleport>

1.1. 複数のテレポートを使用する

複数のテレポートポータルコンポーネントは、そのすべてのコンテンツを 1 つのターゲットにマウントできます。複数のテレポートコンポーネントのコンテンツは兄弟ノードであり、最初にマウントされたコンテンツが前面に、後でマウントされたコンテンツが背面にマウントされます。

次のように使用します。

<テレポート先="body">
    <div class="first">
   最初の取り付け要素</div>  
</テレポート>
<テレポート先="body">
    <div class="second">
   2番目の取り付け要素</div>  
</テレポート>

実行結果は図に示されています。

上記の例は次の例と同等です。

<テレポート先="body">
 <div class="first">
  最初の取り付け要素</div>
 <div class="second">
  2番目の取り付け要素</div>
</テレポート>

2. テレポートを使用する理由

Vue で開発する場合、複数のコンポーネントが常にネストされるため、要素のスタイルや階層の処理が難しくなります。たとえば、モーダルまたはトーストプロンプトボックスを追加する必要がある場合、そのようなボックスを Vue コンポーネントから分離できれば、スタイルと階層を設定しやすくなります。

学生の中には、index.html に直接記述したほうが良いのではないかと思う人もいるかもしれません。さらに、モーダル要素とトースト要素は、vue コンポーネントの状態値を使用して、状態を通じてモーダルとトーストの非表示と表示を制御する必要があります。 index.html に直接記述すると状態制御が複雑になります。

そこで、テレポートコンポーネントが役に立ちます。これは、要素を任意の要素にテレポートできる「ドラえもん」のどこでもドアに少し似ています。 vue コンポーネントの状態値を使用して制御することもできます。

3. テレポートアプリケーション

vite + vue 3 を使用して作成されたプロジェクト。プロジェクトの作成方法の詳細については、「え、まだ webpack 使ってるの？」を参照してください。「他の人はプロジェクトを構築するために vite を使用しています」という記事。

Vue 3 プロジェクトが作成されたら、index.htm ファイルを見つけて以下を追加します。

<div id="newModal"></div>

コンポーネントファイルに、テレポートコンポーネントを追加します。

<button @click="showModal" class="btn">モーダルを開く </button>
<!-- to 属性はターゲットの場所です -->
<テレポート先="#newModal">
 <div v-if="表示">
  <div>私はモーダルボックスです</div>
  </div>
</テレポート>

実行結果から、使用されたテレポートコンポーネントは、<div></div> と同じレベルの to 属性を介してコンテンツを <div></div> に送信することがわかりました。現時点では、テレポート内の要素の非表示と表示は、vue コンポーネント内の状態値によって完全に決定されます。

4. 初心者が陥りやすい落とし穴

学生の中には、テレポートコンポーネントを自分のプロジェクトに直接導入した人もいました。実行してみると、コンポーネントはそのまま出力されるものの、解析されずにエラーが報告されることがわかりました。

エラーメッセージは次のとおりです。

vue.runtime.esm.js?2b0e:619 [Vue 警告]: 不明なカスタム要素: <teleport> - コンポーネントを正しく登録しましたか? 再帰コンポーネントの場合は、必ず「name」オプションを指定してください。

それからインターネットで解決策を探しましたが、何も見つかりませんでした。

根本的な原因は、vue3 ではなく、まだ vue2 を使用していることです。学生の中には、vue-cli 3 を scaffold して作成したプロジェクトを vue3 とみなす人もいます。 vue-cli 2 と vue-cli 3 を使用してプロジェクトを作成することと、それが vue3 であるかどうかとの間には、必ずしも関連性はありません。

VUE 3 テレポートコンポーネントをすぐに使い始める方法についての記事はこれで終わりです。VUE 3 テレポートに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: