FrontEnd

正式版Vue.js 3.0のTeleportを触ってみる

投稿日:

はじめに

9月18日に待望の Vue.js 3.0 がリリースされました。そこで、今回は以前の記事でも紹介した Teleport について、実際に動かしてみましたので、紹介します。

Vue.js 3.0のプロジェクト作成方法

Vue.js 3.0 でも、 Vue CLI を使ったプロジェクトの作成方法は変わっていません。ただし、 Vue.js 3.0 のプロジェクトを作成するには、 Vue CLI v4.5 以上が必要になります。

vue3-teleport-1

今回から、新たに Default (Vue 3 Preview) ([Vue 3] babel, eslint) という選択肢が増えました。こちらを選択して、サンプルプロジェクトを作成します。

Preview とついてある通り、この設定はプレビュー用とのことです。

This version adds first-class Vue 3 support (for preview). You no longer need vue-cli-plugin-vue-next to serve and build Vue 3 projects. Users of the plugin can safely remove it from the projects.

https://github.com/vuejs/vue-cli/releases/tag/v4.5.0

Teleportとは

以前の記事で紹介しましたとおり、 <Teleport> タグで囲った部分を、コンポーネントが属するDOMツリーとは別の場所に、移動させることができます。これにより、主にCSS関連で恩恵を受けることができます。一般的には、モーダルなどを作る際に、利用されるのではないでしょうか。

基本形

一番シンプルな実装を紹介します。画面にモーダルを表示するボタンを配置し、クリックすると、全画面モーダルを表示します。

コード

Index.html は、 Vue CLI で生成した状態から、変更はありません。

App.vue は以下の通りです。 TeleportSample1 が、実際に Teleport する部分を含んだコンポーネントです。

TeleportSample1.vue は以下の通りです。以前の記事でも紹介しましたとおり、 to で指定した先に移動するので、このサンプルでは body の直下にモーダルが移動します。

画面

実際の画面はこちらです。

vue3-teleport-2

「モーダルを開く」ボタンをクリックすると、 <body> タグの中に <div> タグが追加されているのがわかります。

vue3-teleport-3

devtools で確認すると、 TeleportSample1 は App の子のコンポーネントであることがわかります。

vue3-teleport-4

別のコンポーネントの入れ子にする場合

次に、別のコンポーネントの入れ子にする場合について、紹介します。親のコンポーネント(カード)の中に、子のコンポーネント(フォーム)がある例で、コードをみていきます。

コード

App.vue は以下の通りです。 TeleportSample2Parent が、実際に Teleport する部分を含んだコンポーネントです。

TeleportSample2Parent.vue は以下の通りです。

TeleportSample2Child.vue は以下の通りです。

画面

画面は以下の通りです。

vue3-teleport-8

送信ボタンをクリックすると、確認モーダルが表示されます。

vue3-teleport-9

基本形でもモーダルを例にあげましたが、モーダルは入れ子になったコンポーネントの中に表示するのではなく、 body の直下のような、他のコンポーネントとは独立した所に配置される方が都合が良いです。

Teleport を使わないで同じことをしようとすると、親のコンポーネントに対して、 ネストした分 emit を繰り返す必要があり、手間がかかりますが、 Teleport を使うと、シンプルに実装することができます。

同じターゲットに複数Teleportする場合

同じターゲットに複数のコンポーネントをテレポートする場合について、紹介します。

コード

App.vue は以下の通りです。 TeleportSample3A と TeleportSample3B が、実際に Teleport する部分を含んだコンポーネントです。

TeleportSample3A.vue は以下の通りです。

TeleportSample3B.vue は以下の通りです。

画面

同じターゲットに複数のコンポーネントを Teleport する場合、記載された順番に表示されます。

vue3-teleport-8

おまけ

正規のdevtools は Vue.js 3.0 に対応していないので、こちらの通り、ベータ版を使用しましょう。

さいごに

ついに登場した Vue.js 3.0 にて、 Teleport を実際に動かしてみました。RC版だった時は、実際のプロジェクトでは使用できませんでしが、これで心置きなく Vue.js 3.0 を使えそうです。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで  プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年11月
1234567
891011121314
15161718192021
22232425262728
2930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。