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 ...
Search
arm4
July 10, 2019
Programming
4
1.4k
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
140
5 Points Of Customizing Vuetify
fromarm4
4
1.3k
laravel_lt_party_with_mokumoku_3
fromarm4
0
390
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
970
Trying to write a code with Laravel+Vue+TypeScript
fromarm4
0
520
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
770
solving frontend issues
fromarm4
1
1.6k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
860
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
1.3k
Other Decks in Programming
See All in Programming
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
510
Using AI Tools Around Software Development
inouehi
0
1.2k
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
1.9k
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
270
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
120
Is Xcode slowly dying out in 2025?
uetyo
0
110
Passkeys for Java Developers
ynojima
3
870
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
280
単体テストの始め方/作り方
toms74209200
0
500
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
It's Worth the Effort
3n
184
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Cult of Friendly URLs
andyhume
79
6.4k
Designing Experiences People Love
moore
142
24k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Docker and Python
trallard
44
3.4k
Raft: Consensus for Rubyists
vanstee
140
7k
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