Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
about abstract component design using slots of Vue.js
Search
arm4
July 10, 2019
Programming
4
1.3k
about abstract component design using slots of Vue.js
arm4
July 10, 2019
Tweet
Share
More Decks by arm4
See All by arm4
Google Data Studio 101
fromarm4
0
110
5 Points Of Customizing Vuetify
fromarm4
4
1.2k
laravel_lt_party_with_mokumoku_3
fromarm4
0
310
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
920
Trying to write a code with Laravel+Vue+TypeScript
fromarm4
0
440
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
660
solving frontend issues
fromarm4
1
1.5k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
820
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
1.2k
Other Decks in Programming
See All in Programming
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
CSC307 Lecture 10
javiergs
PRO
0
310
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
20240706_CDKConf
takuyay0ne
0
1.2k
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Advanced App Shrinking Techniques
cbeyls
2
150
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Automating Front-end Workflow
addyosmani
1362
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Navigating Team Friction
lara
181
13k
Web development in the modern age
philhawksworth
203
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Debugging Ruby Performance
tmm1
71
11k
Teambox: Starting and Learning
jrom
130
8.6k
What the flash - Photography Introduction
edds
65
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Designing Experiences People Love
moore
136
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Transcript
7VFKTͷ4MPUΛ׆༻ͨ͠ ൚༻తίϯϙʔωϯτઃܭʹ͍ͭͯ 2019.07.10 Yoko Hato
ࣗݾհ גࣜձࣾϓϥϜβ Prime Order ࣄۀ෦ Tech Lead ോ ༸ࢠ 1SJNF0SEFSެࣜ5XJUUFS!QMVNTB
ϥϥɾϕϧࢠ͞Μͷதͷਓ ͓ؾܰʹϑΥϩʔ͍ͩ͘͞ʂ 2
1SJNF 0SEFS ࣄۀ෦ͱʁ 3 ઐੑͷߴ͍ϑϦʔϥϯεΤϯδχΞͷํͱ ࢲͨͪࣾһ͕ҰͭͷνʔϜͱͳΓ 6*ɾ69ʹͩ͜Θͬͨ ΦʔμʔϝΠυͷۀγεςϜͷ։ൃΛߦ͏ ઐूஂɻ ݴޠ1)1
+BWB4DSJQU ϑϨʔϜϫʔΫ-BSBWFM 7VFKT
ۀγεςϜΛϑϧίϯϙʔωϯτઃܭͷ41"Ͱ࡞͍ͬͯ·͢ʂ 4
5 ࠓ͢͜ͱ l 4MPUΛ͏ಈػ 4MPUΛ͏ͱ͜Μͳίϯϙʔωϯτ͕࡞ΕΔʂ l 4MPU͜ͱ͡Ί 4MPUͬͯԿʁ ໊લ͖TMPU /BNFE4MPU
ͱʁ είʔϓ͖TMPU 4DPQFE4MPU ͱʁ l 4MPU׆༻ྫ l 6*ϑϨʔϜϫʔΫΛ͓͏ʂ l 4MPUͷҙ
4MPUΛ͏ಈػ 6
4MPUΛ͏ಈػ 7 !"! " ! #
4MPUΛ͏ಈػ 8 *+(&$- %*-) " . '$),*+ ! %*-)
#$%-"
4MPUΛ͏ಈػ 9 title $)+& (*# !"$+'% props !"$+
4MPUΛ͏ಈػ 10 !'#$ #$ %"'& #& (
4MPUΛ͏ಈػ 11 props #"$!#
#"$!#
12 ίϯϙʔωϯτͷڞ௨ͷ෦͚ͩΛ ίϯϙʔωϯτԽͯ͠ɺ ͋ͱࣗ༝ʹɺ ͏࣌ʹΧελϚΠζ͍ͨ͠ʂ ڞ௨෦ • IPWFS͢Δͱπʔϧνοϓ͕දࣔ͞ΕΔ • λΠτϧͱຊจ͕͋Δ
• ͱλΠτϧͷσβΠϯ • ΞΠίϯ͕දࣔͰ͖Δ ΧελϚΠζ෦ • λΠτϧ෦ͷϑΥϯταΠζ৭ • ຊจʹՃ͢ΔίϝϯτΞΠίϯɺϑΥϯταΠζ৭
Slot 13 • ͏࣌؆ܿʹॻ͚Δ • λΠτϧ෦ͱຊจ෦ͷΧελϚΠζΛ͠Α͏ͱࢥ͏ͱ ຖճίϯϙʔωϯτͷվम͕ඞཁ • ඍົͳΧελϚΠζͷͨͼʹɺͲΜͲΜQSPQT͕૿͑Δ
Slot 14 • ͏࣌ͷهड़ྔଟ͘ͳΔ • λΠτϧ෦ͱຊจ෦ͷΧελ ϚΠζ͕ࣗࡏʹߦ͑Δ • ίϯϙʔωϯτΛվम͢Δඞཁ͕ ͳ͍
ந͕ߴ͍ΧελϚΠβϒϧͳίϯϙʔωϯτΛ࡞͢Δ͜ͱʹΑΓɺ ಉ͡ৼΔ͍Λίϐϖ͢Δඞཁͳ͘ɺඍົʹҧ͏ผʑͷίϯϙʔωϯτ ͕༰қͰ؆ܿʹ࡞Ͱ͖ΔΑ͏ʹͳΔɻ Slot 15
class ্࢘ίϝϯτίϯϙʔωϯτ $VUF.FNPίϯϙʔ ωϯτΛ্ͬͯ࢘ ίϝϯτίϯϙʔω ϯτΛ࡞Δ
TMPU͜ͱ͡Ί 16
Slot “ <slot>
https://jp.vuejs.org/v2/guid e/components-slots.html 17 ίϯϙʔωϯτΛ͏࣌ʹ දࣔ༰͕ͤΔʂ TMPU෦ʹ λάͰғ·Εͨίϯςϯπ͕ೖΔ Button Button
Slot HTML
18 Button Button
Slot
19 Button Button Button
Slot $ %#
& ' 20 Button Button"!
slot(Named Slot) ! " # 21
ActionButton ActionButton
slot(Scoped Slot) slot 22
ActionButton ActionButton ͜ͷΑ͏ʹ ίϯϙʔωϯτͷσʔλΛ εϩοτʹWCJOEͰ͓ͯ͘͠ͱ ༻࣌ͷεϩοτίϯςϯπͰ ͦͷσʔλΛ͏͜ͱ͕Ͱ͖Δ TMPUʹόΠϯυ͞ΕͨଐੑΛ εϩοτϓϩύςΟ ͱݺͿ
4MPUΛ׆༻ͨ͠ ൚༻ੑͷߴ͍ ίϯϙʔωϯτྫ 23 Slot׆༻ྫ
Slot46*: "'% 24 "'%:'!#'$ -8.51"'% -8.59/1 & '&
slot (7,3 26& '&) +0;
Scoped Slot)*&: 25 " #/-,*!"!scoped slot0( '!"!%
. +1#/$2
4MPUͷΈΛཧղ ͯ͠ 6*ϑϨʔϜϫʔΫΛ ׆༻ͯ͠ΈΑ͏ 26 UIϑϨʔϜϫʔΫΛ͓͏ʂ
Vuetify 27 Vue.jsUI 6*ίϯϙʔωϯτ͕ ඇৗʹ๛Ͱ
ΧελϚΠζੑ͕ߴ͍ʂ
28 headers header-cell items page-text ΧελϚΠζͰ͖Δ TMPU͕ͨ͘͞Μ༻ҙͯ͋͠Δʂ ίϯϙʔωϯτσʔλΛͬͯ ΧελϚΠζͰ͖Δ TDPQFETMPU๛ʂ
4MPUͷҙ 29
Slot Vue 2.6.0 ) . 30 lTMPU͓Αͼ TMPUTDPQFଐੑࠓޙͷ YϦϦʔεͰҾ͖ଓ͖αϙʔτ͞Ε·͕͢ɺ
ެࣜʹඇਪͱͳΓɺ7VF Ͱআ͞ΕΔͰ͠ΐ͏ɻz https://jp.vuejs.org/v2/guide/components-slots.html - -%! +& -%! slot *( - slotslot-scope#$ ", ' slot *( - v-slot ", ͜Ε·ͰIUNMཁૉΛ TMPUίϯςϯπͷ ίϯςφʹͰ͖ͨ WTMPUݪଇ UFNQMBUFʹ͔͠༩ Ͱ͖ͳ͍σΟϨΫςΟϒ ৄࡉυΩϡϝϯτࢀর
31 ࠷ޙʹ͓Βͤ
32 Prime Order ʹ+PJO͠·ͤΜ͔ʁ ձࣾ๚ͷ͓ਃࠐΈͪ͜Β͔Β IUUQTHPPHMGPSNT*$ES2X&N"KZP. ͓٬༷ͷۀ՝ɾۀϑϩʔΛ վળ͠ɺ ͓٬༷ͷϏδωεʹɺ ࢲͨͪͷ͍Δࣾձʹɺ
৽͍͠ՁΛੜΈग़ͯ͘͠ΕΔ ϑϦʔϥϯεΤϯδχΞͷํΛ ืू͍ͯ͠·͢ʂʂ
33 ݄ ʹ -BSBWFM7VFKT ϞϒϓϩձΛΓ·͢ʂ ϞϒϓϩॳΊͯͷํɺେܴͰ͢ɻࢲॳΊͯͰ͆͢ ࢀՃ͓ਃ͠ࠐΈ͓͓ͪͯ͠Γ·͢ʂ https://plumsa.connpass.com/event/136291/
34 Thank You So Much :) Any Questions? Yoko @plumsa