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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Kaneko Takeshi
November 20, 2020
Technology
0
28
Vue.js v3.0 機能紹介① Teleport
Pizza_JP#35
Kaneko Takeshi
November 20, 2020
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
34
Eye Tracking on the Browser
tkckaneko
0
91
IEEE754を完全に理解した
tkckaneko
1
79
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
96
多分これが一番早いと思います
tkckaneko
0
28
暗黒面の話
tkckaneko
0
27
CSR / SSR / SSG / JAMstack
tkckaneko
0
74
BOLT
tkckaneko
0
33
CSS Logical Properties and Values
tkckaneko
0
38
Other Decks in Technology
See All in Technology
非情報系研究者へ送る Transformer入門
rishiyama
13
8.3k
Everything Claude Code を眺める
oikon48
11
7k
Kiro Powers 入門
k_adachi_01
0
110
OSC仙台プレ勉強会 AlmaLinuxとは
koedoyoshida
0
190
銀行の内製開発にて2つのプロダクトを1つのチームでスクラムしてみてる話
koba1210
1
140
Lambda Web AdapterでLambdaをWEBフレームワーク利用する
sahou909
0
160
Zeal of the Convert: Taming Shai-Hulud with AI
ramimac
0
150
楽しく学ぼう!ネットワーク入門
shotashiratori
4
3.4k
【Oracle Cloud ウェビナー】【入門編】はじめてのOracle AI Data Platform - AIのためのデータ準備&自社用AIエージェントをワンストップで実現
oracle4engineer
PRO
1
150
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
taku1418
0
190
バクラク最古参プロダクトで重ねた技術投資を振り返る
ypresto
0
170
Cortex Code CLI と一緒に進めるAgentic Data Engineering
__allllllllez__
0
410
Featured
See All Featured
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
240
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Paper Plane
katiecoart
PRO
0
48k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Navigating Team Friction
lara
192
16k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
190
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.2k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.1k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
320
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
140
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
160
Design in an AI World
tapps
0
170
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の構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる