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
27
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
68
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
28
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
32

Other Decks in Technology

See All in Technology
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
Avatar for Makky12 smt7174
2
140
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
Avatar for Genki Sano sanogemaru
0
510
[Keynote] What do you need to know about DevEx in 2025
Avatar for Salaboy salaboy
0
170
CoRL 2025 Survey
Avatar for Haruki Abe harukiabe
1
200
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
930
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
Avatar for naro143 naro143
1
240
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
43k
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
Avatar for Ken'ichirou Kimura kenichirokimura
3
320
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
Avatar for shonansurvivors shonansurvivors
4
450
技育祭2025【秋】 企業ピッチ/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
0
110
Railsの話をしよう
Avatar for Yasuo Honda yahonda
0
140

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
35
6.1k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k

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