Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Kaneko Takeshi Kaneko Takeshi
November 20, 2020
Technology
34
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
49
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
100
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
89
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
100
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
31
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
31
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
79
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
43
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
65

Other Decks in Technology

See All in Technology
AI駆動開発の時代になったのでトヨタ生産方式から見直す
Avatar for terurou terurou
7
5.8k
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
210
全PRの83%が AIレビューだけでマージできるようになった開発組織は その後どうなったか @2026/10
Avatar for a-thug athug
0
140
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
800
[AWS 秋のクラウドオペレーション祭り 2026]AWS DevOps Agentで変わる リリースと運用対応 ~リリース管理機能と Directed actions のご紹介~
Avatar for Toshihiro Furuno furuton
4
1.2k
Kiro Crewをはじめよう
Avatar for t.kizawa kizawa2020
1
150
日本語に強いオープンな大規模言語モデル「LLM-jp」
Avatar for Yusuke Oda odashi
3
640
宣言型部分更新は何を解決しどこへ向かうのか
Avatar for did0es shuta13
1
320
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
7
3k
Loop Engineering, beyond prompt, context, and harness engineering
Avatar for Guillaume Laforge glaforge
0
100
会社説明資料
Avatar for パーソル＆サーバーワークス株式会社 persolserverworks
0
9.7k
大型犬好きによるPugの紹介
Avatar for yamanoku yamanoku
1
150

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
560
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
590
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
350
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k

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