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
25

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
26
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
83
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
74
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
91
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
25
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
22
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
67
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
22
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
32

Other Decks in Technology

See All in Technology
評価の納得感を2段階高める「構造化フィードバック」
Avatar for あろえ aloerina
1
130
今からでも間に合う！ 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
Avatar for Hideaki Aoyagi hideakiaoyagi
1
150
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.8k
開発効率と信頼性を両立する Ubieのプラットフォームエンジニアリング
Avatar for teru0x1 teru0x1
0
130
IAMのマニアックな話 2025を執筆して、​ 見えてきたAWSアカウント管理の現在
Avatar for NRI Netcom nrinetcom
PRO
3
370
AWS全冠したので振りかえってみる
Avatar for tajimon tajimon
0
120
New Cache Hierarchy for Container Images and OCI Artifacts in Kubernetes Clusters using Containerd / KubeCon + CloudNativeCon Japan
Avatar for Preferred Networks pfn
PRO
0
140
Securing your Lambda 101
Avatar for Ilia chillzprezi
0
230
Long journey of Continuous Delivery at Mercari
Avatar for Hisaharu Ishii hisaharu
1
200
Go Connectへの想い
Avatar for chiroruxx chiroruxx
0
160
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
Avatar for Kanta Suga thickstem
0
530
Test Smarter, Not Harder: Achieving Confidence in Complex Distributed Systems
Avatar for Elias Nogueira eliasnogueira
1
150

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k

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