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

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

Kaneko Takeshi
November 20, 2020
Technology
0
20

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

Pizza_JP#35

Kaneko Takeshi

November 20, 2020
Tweet

More Decks by Kaneko Takeshi

See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
10
Eye Tracking on the Browser
tkckaneko
0
72
IEEE754を完全に理解した
tkckaneko
1
50
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
70
多分これが一番早いと思います
tkckaneko
0
23
暗黒面の話
tkckaneko
0
14
CSR / SSR / SSG / JAMstack
tkckaneko
0
50
BOLT
tkckaneko
0
10
CSS Logical Properties and Values
tkckaneko
0
24

Other Decks in Technology

See All in Technology
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
330
生成AIの変革の時代に、 直近1年で直面した課題とその解決策
ktc_wada
1
740
LangSmith入門―トレース／評価／プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
760
require(ESM)とECMAScript仕様
uhyo
4
1k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ～Text-to-MusicとText-To-ImageかつImage-to-Musicを例に～
otanet
0
320
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
600
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
さらばあのボタンとは言わせない SORACOM LTE-M Button powerd by AWSをまだ使えるようにした(前編？)
miura55
0
100
自己改善からチームを動かす！ 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1.1k
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
160
Python と Snowflake はズッ友だょ！~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
150

Featured

See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7k
What's new in Ruby 2.0
geeforr
337
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Designing with Data
zakiwarfel
96
4.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Ruby is Unlike a Banana
tanoku
96
10k
The Pragmatic Product Professional
lauravandoore
26
5.8k
For a Future-Friendly Web
brad_frost
172
9k
Adopting Sorbet at Scale
ufuk
69
8.6k
A better future with KSS
kneath
231
16k
Why Our Code Smells
bkeepers
PRO
331
56k

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