Slide 1
Slide 1 text
Vueίϯϙʔωϯτ࣮ύλʔϯ
Controlled Component & Transparent Wrappers
Slide 2
Slide 2 text
ࣗݾհ
໊લ: seya
ձࣾ: BizReach
झຯ: GraphQL
Slide 3
Slide 3 text
Controlled
Component
Slide 4
Slide 4 text
v-model ศརͰ͢ΑͶ
{{ text }}
Slide 5
Slide 5 text
ͰಠࣗͰఆٛͨ͠ίϯϙʔωϯτʹ
v-model ͍͍ͨ߹Ͳ͏͢Ε͍͍Ͱ͠ΐ͏ʁ
←͜Ε࡞Γ͍ͨ
↓͜Μͳײ͡Ͱॻ͍ͯ
↓ ͜Μͳײ͡ʹ v-model ͍͍ͨɻΠϕϯτϋϯυϥͯ͠͝ʹΐ͝ʹΐͱ͔ͨ͘͠ͳ͍ɻ
Slide 6
Slide 6 text
v-model :value ͱ @input ͷ
Έ߹ΘͤͰͰ͖͍ͯΔ
ྫ͑
ͱಉ͡
Slide 7
Slide 7 text
ͳͷͰࢠڙͷํͰ͜Μͳײ͡Ͱॻ͍ͯ͋͛ͯ
export default {
props: ['value'],
methods: {
toggle() {
this.$emit('input', !this.value);
}
}
};
Slide 8
Slide 8 text
ͷํͰ v-model ॻ͍ͯ͋͛Δ͚ͩͰ
Slide 9
Slide 9 text
ಈ͘ʂ
Slide 10
Slide 10 text
ͪͳΈʹ value ͱ ˏinput ͷͱ͜ʹͪΌΜͱ໊લ
͚͍ͭͨ߹ model ϓϩύςΟΛ͑ՄೳͰ͢
export default {
model: {
prop: 'toggled',
event: ‘toggle'
},
props: [‘toggled'],
methods: {
toggle() {
this.$emit('toggle', !this.toggled);
}
}
};
Slide 11
Slide 11 text
Transparent
Wrappers
Slide 12
Slide 12 text
͖ͬ͞ͷํ๏Ͱಠࣗͷ input ࡞Δ
Slide 13
Slide 13 text
ͦͯ͠Ͱ͜ͷཁૉʹϑΥʔΧε͕͔͔ͬͨΒͳʹ͔
͠Β࣮ߦ͍ͨ͠ͱ͢Δɻ
(inputҎ֎ͷͱ͜ΖʹΦʔόʔϨΠ͔͚Δͱ͔)
Slide 14
Slide 14 text
labelҰॹʹ͢Δͱ…ಈ͔ͳ͍ʂʂʂ
@focus.native ϧʔτͷཁૉΛରʹ͢ΔͨΊ
Input ͷϑΥʔΧεर͑ͳ͍ɻ
͔ͱݴͬͯଞͷࢦఆͷํ๏ͳ͍ɻ٧Μͩɻ
{{ label }}
Slide 15
Slide 15 text
JOQVUʹΠϕϯτϦεφʔ
͕͍͍ͭͯͳ͍ͳΒ
JOQVUʹΠϕϯτϦεφʔΛ͚ͭΕ
͍͍͡Όͳ͍
Transparent Wrappers
Slide 16
Slide 16 text
$listeners ͰΠϕϯτϦεφʔΛऔಘͰ͖ΔͷͰɺͦΕΛ෦
ͷ input ʹͯ͋͛͠Δɻ
{{ label }}
computed: {
listeners() {
return {
...this.$listeners,
input: event =>
this.$emit('input', event.target.value)
}
}
}
Slide 17
Slide 17 text
͋ͱ @focus.native Λ @focus ʹͯ͋͛͠Ε
Slide 18
Slide 18 text
ಈ͘ʂʂʂ
Slide 19
Slide 19 text
PlaceholderΛ͍ͨ͠߹ʁ
Slide 20
Slide 20 text
ࢀߟ: https://jp.vuejs.org/v2/api/#inheritAttrs
Slide 21
Slide 21 text
inheritAttrs Λ false ʹͯ͠ v-bind ʹ $attrs ΛͤOK
{{ label }}
export default {
inheritAttrs: false,
// ଞͷͭ
}
Slide 22
Slide 22 text
݁
Controlled Component + Transparent Wrapper
=
ωΠςΟϒཁૉͬΆ͘ѻ͑Δಠࣗͷίϯϙʔωϯτ͕࡞ΕΔʂ
Slide 23
Slide 23 text
࠷ޙʹ
࣮υΩϡϝϯτʹ͞Βͬͱॻ͍ͯ͋Δ
Slide 24
Slide 24 text
Ջ͕͋ͬͨΒυΩϡϝϯτಡ͏ʂ
Slide 25
Slide 25 text
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ