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
0
26

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

Pizza_JP#35
Avatar for Kaneko Takeshi

Kaneko Takeshi

November 20, 2020
Tweet

More Decks by Kaneko Takeshi

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

Other Decks in Technology

See All in Technology
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
Avatar for あれ __allllllllez__
1
140
Beyond Kaniko: Navigating Unprivileged Container Image Creation
Avatar for Felix Dreissig f30
0
130
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for michal deltahelp
0
430
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
Avatar for Nstock nstock
0
100
20250707-AI活用の個人差を埋めるチームづくり
Avatar for shnjtk shnjtk
4
3.7k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
Avatar for ishikawa ryu vsanna2
0
120
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
3
960
LangChain Interrupt & LangChain Ambassadors meetingレポート
Avatar for os1ma os1ma
2
290
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
27k
ビギナーであり続ける/beginning
Avatar for 小田中育生 ikuodanaka
3
730
Core Audio tapを使ったリアルタイム音声処理のお話
Avatar for Sloth yuta0306
0
190
ゼロからはじめる採用広報
Avatar for Yuta Horii yutadayo
3
760

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
730
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k

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の構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる