Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js v3.0 機能紹介① Teleport
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kaneko Takeshi
November 20, 2020
Technology
30
0
Share
Vue.js v3.0 機能紹介① Teleport
Pizza_JP#35
Kaneko Takeshi
November 20, 2020
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
38
Eye Tracking on the Browser
tkckaneko
0
93
IEEE754を完全に理解した
tkckaneko
1
83
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
99
多分これが一番早いと思います
tkckaneko
0
29
暗黒面の話
tkckaneko
0
30
CSR / SSR / SSG / JAMstack
tkckaneko
0
77
BOLT
tkckaneko
0
38
CSS Logical Properties and Values
tkckaneko
0
49
Other Decks in Technology
See All in Technology
はじめてのDatadog
kairim0
0
260
もりもり新機能を一挙紹介! AgentCoreに入門して、AWS上にAIエージェントを構築しよう
minorun365
PRO
6
710
関西に縁あるMicrosoft MVPsが語るCopilotの未来
kasada
0
1k
サプライチェーンセキュリティの空白地帯 - 信頼できる”依存性”の未来を考える
rung
PRO
2
650
[モダンアプリ勉強会]今更聞けないGit/GitHub入門
tsukuboshi
0
170
エンジニアは生成AIと どのように向き合うべきか? ことばの意味という観点から
verypluming
3
340
ポスター発表&デモと総括 / Poster Presentations & Demonstrations and Summary
ks91
PRO
0
190
AI Adaptable なテストを整える工夫 / Ways to Make Your Tests AI-Adaptable
bitkey
PRO
2
200
Ruby::Boxでできること、Refinementsでできること
joker1007
3
380
Gradle×GitHub_ActionsでCI時間を約50%短縮 ジョブ分割の設計と落とし穴 / Cutting CI Time by ~50% with Gradle and GitHub Actions: Job-Splitting Design and Pitfalls
takatty
0
610
JEP 522 Deep Dive - G1 GC同期コスト削減によるスループット向上を徹底検証&解説
tabatad
1
680
AIガバナンス実践 - 生成AIコネクタのデータ漏洩リスクと実務対策
knishioka
0
170
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Done Done
chrislema
186
16k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
320
Color Theory Basics | Prateek | Gurzu
gurzu
0
320
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
720
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
280
Unsuck your backbone
ammeep
672
58k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
A better future with KSS
kneath
240
18k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
550
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
1.6k
Transcript
Vue.js 3.0 機能紹介① Teleport
Teleport 通常では定義したコンポーネントが属するDOMツリーでレンダリン グされるのですが、Teleportを使えば別の場所に移動されることが できます。 - モーダルとか上のレイヤーに表示したいコンテンツを移動させ たりできる - 親要素のStyleに干渉されなくなる
超便利!
Teleport ちなみに2系でもPortalVueってライブラリを使えばできます https://github.com/LinusBorg/portal-vue
Teleport <teleport>コンポーネントでtargetにセレクタで指定すると、指定さ れたtargetのコンポーネント内にレンダリングされます。 <teleport to="body"> <Modal /> </teleport> ※ Vue.jsのDOMツリーの外でも指定できます
この場合だと<body>の 直下に入ります
Teleport デモ
Teleport - DOMの構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる