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


関連記事

react-icon

React Konvaのソースコードを読む

1 はじめに2 React Konvaの大まかなアーキテクチャ3 コンポーネントがCanvas描画に変換される仕組み3.1 Stageコンポーネント3.2 StageWrap3.3 KonvaRend ...

svelte

Svelteのチュートリアルをやってみた

1 はじめに2 Svelteとは?2.1 Svelteの特徴2.2 Write less code2.3 No Virtual DOM2.4 Truly reactive3 Svelteのシンタックス ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

フォロー

blog-page_side_responsive

2020年11月
1234567
891011121314
15161718192021
22232425262728
2930  

アプリ情報

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