Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js v3.0 機能紹介① Teleport

Avatar for Kaneko Takeshi Kaneko Takeshi
November 20, 2020
Technology
30
0

Vue.js v3.0 機能紹介① Teleport

Pizza_JP#35

Avatar for Kaneko Takeshi

Kaneko Takeshi

November 20, 2020

More Decks by Kaneko Takeshi

See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
Avatar for Kaneko Takeshi tkckaneko
0
35
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
91
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
79
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
97
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
28
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
27
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
74
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
33
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
39

Other Decks in Technology

See All in Technology
ZOZOTOWNリプレイスでのSkills導入までの流れとこれから
Avatar for ZOZO Developers zozotech
PRO
2
2.4k
Oracle AI Databaseデータベース・サービス: BaseDB/ExaDB-Dの可用性
Avatar for oracle4engineer oracle4engineer
PRO
1
110
GitHub Advanced Security × Defender for Cloudで開発とSecOpsのサイロを超える: コードとクラウドをつなぐ、開発プラットフォームのセキュリティ
Avatar for yuriemori yuriemori
1
130
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
250
AIがコードを書く時代の ジェネレーティブプログラミング
Avatar for polidog polidog
PRO
1
200
互換性のある（らしい）DBへの移行など考えるにあたってたいへんざっくり
Avatar for Takanori Sejima sejima
PRO
0
540
仕様通り動くの先へ。Claude Codeで「使える」を検証する
Avatar for Gota gotalab555
5
1.8k
I ran an automated simulation of fake news spread using OpenClaw.
Avatar for otsuka zzzzico
1
890
「活動」は激変する。「ベース」は変わらない ～ 4つの軸で捉える_AI時代ソフトウェア開発マネジメント
Avatar for 辻裕士/sentokun sentokun
0
150
バックオフィスPJのPjMをコーポレートITが担うとうまくいく3つの理由
Avatar for chama yueda256
1
270
出版記念イベントin大阪「書籍紹介＆私がよく使うMCPサーバー3選と社内で安全に活用する方法」
Avatar for KintoTech_Dev kintotechdev
0
150

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
300
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
800
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
170
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.9M
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
210
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k

Transcript

  1. Vue.js 3.0 機能紹介① Teleport

  2. Teleport 通常では定義したコンポーネントが属するDOMツリーでレンダリン グされるのですが、Teleportを使えば別の場所に移動されることが できます。 - モーダルとか上のレイヤーに表示したいコンテンツを移動させ たりできる - 親要素のStyleに干渉されなくなる

  3. 超便利！

  4. Teleport ちなみに2系でもPortalVueってライブラリを使えばできます https://github.com/LinusBorg/portal-vue

  5. Teleport <teleport>コンポーネントでtargetにセレクタで指定すると、指定さ れたtargetのコンポーネント内にレンダリングされます。 <teleport to="body"> <Modal /> </teleport> ※ Vue.jsのDOMツリーの外でも指定できます

    この場合だと<body>の 直下に入ります

  6. Teleport デモ

  7. Teleport - DOMの構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる