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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
38
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
93
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
83
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
99
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
29
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
30
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
77
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
38
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
49

Other Decks in Technology

See All in Technology
はじめてのDatadog
Avatar for KairiM kairim0
0
260
もりもり新機能を一挙紹介！ AgentCoreに入門して、AWS上にAIエージェントを構築しよう
Avatar for みのるん minorun365
PRO
6
710
関西に縁あるMicrosoft MVPsが語るCopilotの未来
Avatar for Kaz Asada | しがない情シス kasada
0
1k
サプライチェーンセキュリティの空白地帯 - 信頼できる”依存性”の未来を考える
Avatar for Hiroki Suezawa (@rung) rung
PRO
2
650
[モダンアプリ勉強会]今更聞けないGit/GitHub入門
Avatar for つくぼし tsukuboshi
0
170
エンジニアは生成AIと どのように向き合うべきか？ ことばの意味という観点から
Avatar for Hitomi Yanaka verypluming
3
340
ポスター発表&デモと総括 / Poster Presentations & Demonstrations and Summary
Avatar for Kenji Saito ks91
PRO
0
190
AI Adaptable なテストを整える工夫 / Ways to Make Your Tests AI-Adaptable
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
200
Ruby::Boxでできること、Refinementsでできること
Avatar for Tomohiro Hashidate joker1007
3
380
Gradle×GitHub_ActionsでCI時間を約50%短縮 ジョブ分割の設計と落とし穴 / Cutting CI Time by ~50% with Gradle and GitHub Actions: Job-Splitting Design and Pitfalls
Avatar for 冨澤宝斗 takatty
0
610
JEP 522 Deep Dive - G1 GC同期コスト削減によるスループット向上を徹底検証&解説
Avatar for Daishi Tabata tabatad
1
680
AIガバナンス実践 - 生成AIコネクタのデータ漏洩リスクと実務対策
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
170

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Done Done
Avatar for chrislema chrislema
186
16k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
320
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
320
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
720
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
550
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.6k

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