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の開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年11月
1234567
891011121314
15161718192021
22232425262728
2930 

アプリ情報

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