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
28
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
84
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
68
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
29
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
33

Other Decks in Technology

See All in Technology
us-east-1 の障害が 起きると なぜ ソワソワするのか
Avatar for Kazuki Miura miu_crescent
PRO
2
760
Snowflakeとdbtで加速する 「TVCMデータで価値を生む組織」への進化論 / Evolving TVCM Data Value in TELECY with Snowflake and dbt
Avatar for CARTA Engineering carta_engineering
2
240
自己的售票系統自己做！
Avatar for 高見龍 eddie
0
410
クレジットカードの不正を防止する技術
Avatar for Yuta Horii yutadayo
13
5.8k
AWS資格は取ったけどIAMロールを腹落ちできてなかったので、年内に整理してみた
Avatar for Hiroto hiro_eng_
0
160
What's the recommended Flutter architecture
Avatar for AAkira aakira
1
740
ソフトウェアテストのAI活用_ver1.50
Avatar for fumisuke fumisuke
0
290
エンジニアに定年なし！ AI時代にキャリアをReboot — 学び続けて未来を創る
Avatar for JunjiKoide junjikoide
0
170
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.9k
隙間ツール開発のすすめ / PHP Conference Fukuoka 2025
Avatar for meihei meihei3
0
310
Amazon ECS デプロイツール ecspresso の開発を支える「正しい抽象化」の探求 / YAPC::Fukuoka 2025
Avatar for FUJIWARA Shunichiro fujiwara3
7
1.1k
Data & AIの未来とLakeHouse
Avatar for Satoru Ishikawa ishikawa_satoru
0
710

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k

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