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.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
340
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
930
Trying to write a code with Laravel+Vue+TypeScript
fromarm4
0
460
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
680
solving frontend issues
fromarm4
1
1.5k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
830
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
1.2k
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
420
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
220
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
480
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
190
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
310
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
3
170
Unlocking Python's Core Magic
leew
0
100
5年分のツケを一気に払った話
soogie
3
850
なぜアジャイルがうまくいかないのか?
yum3
2
140
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
500
Quarto Clean Theme
nicetak
0
220
So you want to write a User-Defined Function for Flink? @ Current 2024 - Austin, TX
hpgrahsl
0
110
Featured
See All Featured
Clear Off the Table
cherdarchuk
91
320k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
216
12k
Typedesign – Prime Four
hannesfritz
39
2.3k
We Have a Design System, Now What?
morganepeng
48
7.1k
Automating Front-end Workflow
addyosmani
1365
200k
How GitHub (no longer) Works
holman
310
140k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Documentation Writing (for coders)
carmenintech
65
4.3k
Statistics for Hackers
jakevdp
794
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Six Lessons from altMBA
skipperchong
26
3.4k
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