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
Vue コンポーネント実装パターン
Search
seya
May 22, 2018
Programming
16
3.8k
Vue コンポーネント実装パターン
v-meetup vol.7 でのLT資料です。
seya
May 22, 2018
Tweet
Share
More Decks by seya
See All by seya
継続的な評価基準と評価の実行の仕方をアップデートするワークフロー
kazuyaseki
2
130
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
2.1k
エンジニアにオススメの Figma 活用
kazuyaseki
16
14k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.6k
フロントエンド開発のための Figma
kazuyaseki
20
25k
PWAに取り組む前に知っておきたい SPAとSEO
kazuyaseki
10
4.2k
State of SEO for SPA 2018
kazuyaseki
8
5k
Selenium あるある
kazuyaseki
0
1.7k
Other Decks in Programming
See All in Programming
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
GoとPHPのインターフェイスの違い
shimabox
2
210
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
310
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
170
Jakarta EE meets AI
ivargrimstad
0
410
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Visualization
eitanlees
146
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building Applications with DynamoDB
mza
93
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Docker and Python
trallard
44
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Transcript
Vueίϯϙʔωϯτ࣮ύλʔϯ Controlled Component & Transparent Wrappers
ࣗݾհ ໊લ: seya ձࣾ: BizReach झຯ: GraphQL
Controlled Component
v-model ศརͰ͢ΑͶ <input type="text" v-model="text" /> <button>{{ text }}</button>
ͰಠࣗͰఆٛͨ͠ίϯϙʔωϯτʹ v-model ͍͍ͨ߹Ͳ͏͢Ε͍͍Ͱ͠ΐ͏ʁ <form> <toggle-button v-model="toggled" /> </form> ←͜Ε࡞Γ͍ͨ <template>
<span class="toggle" role="checkbox" tabindex=“0" aria-checked="false" ></span> </template> ↓͜Μͳײ͡Ͱॻ͍ͯ ↓ ͜Μͳײ͡ʹ v-model ͍͍ͨɻΠϕϯτϋϯυϥͯ͠͝ʹΐ͝ʹΐͱ͔ͨ͘͠ͳ͍ɻ
v-model :value ͱ @input ͷ Έ߹ΘͤͰͰ͖͍ͯΔ <input type="text" v-model="text"
/> <input type="text" :value="text" @input="$emit('input', $event.target.value)" /> ྫ͑ ͱಉ͡
ͳͷͰࢠڙͷํͰ͜Μͳײ͡Ͱॻ͍ͯ͋͛ͯ <template> <span class="toggle" role="checkbox" tabindex="0" @click="toggle" :aria-checked="value.toString()" ></span> </template>
<script> export default { props: ['value'], methods: { toggle() { this.$emit('input', !this.value); } } }; </script>
ͷํͰ v-model ॻ͍ͯ͋͛Δ͚ͩͰ <form> <toggle-input v-model="someFlag" /> </form>
ಈ͘ʂ
ͪͳΈʹ value ͱ ˏinput ͷͱ͜ʹͪΌΜͱ໊લ ͚͍ͭͨ߹ model ϓϩύςΟΛ͑ՄೳͰ͢ <script> export
default { model: { prop: 'toggled', event: ‘toggle' }, props: [‘toggled'], methods: { toggle() { this.$emit('toggle', !this.toggled); } } }; </script>
Transparent Wrappers
͖ͬ͞ͷํ๏Ͱಠࣗͷ input ࡞Δ <template> <input :value="value" @input="$emit('input', $event.target.value)" /> </template>
ͦͯ͠Ͱ͜ͷཁૉʹϑΥʔΧε͕͔͔ͬͨΒͳʹ͔ ͠Β࣮ߦ͍ͨ͠ͱ͢Δɻ (inputҎ֎ͷͱ͜ΖʹΦʔόʔϨΠ͔͚Δͱ͔) <template> <form> <custom-input @focus.native="showOverlay" /> </form> </template>
labelҰॹʹ͢Δͱ…ಈ͔ͳ͍ʂʂʂ @focus.native ϧʔτͷཁૉΛରʹ͢ΔͨΊ Input ͷϑΥʔΧεर͑ͳ͍ɻ ͔ͱݴͬͯଞͷࢦఆͷํ๏ͳ͍ɻ٧Μͩɻ <template> <label> {{ label
}} <input :value="value" @input="$emit('input', $event.target.value)" /> </label> </template>
JOQVUʹΠϕϯτϦεφʔ ͕͍͍ͭͯͳ͍ͳΒ JOQVUʹΠϕϯτϦεφʔΛ͚ͭΕ ͍͍͡Όͳ͍ Transparent Wrappers
$listeners ͰΠϕϯτϦεφʔΛऔಘͰ͖ΔͷͰɺͦΕΛ෦ ͷ input ʹͯ͋͛͠Δɻ <template> <label> {{ label }}
<input :value="value" v-on="listeners" /> </label> </template> <script> computed: { listeners() { return { ...this.$listeners, input: event => this.$emit('input', event.target.value) } } } </script>
͋ͱ @focus.native Λ @focus ʹͯ͋͛͠Ε <template> <form> <custom-input :label=“hoge” @focus="showOverlay"
v-model="text" /> </form> </template>
ಈ͘ʂʂʂ
PlaceholderΛ͍ͨ͠߹ʁ <template> <form> <custom-input placeholder=“text" :label="hoge" @focus="showOverlay" v-model="text" /> </form>
</template>
ࢀߟ: https://jp.vuejs.org/v2/api/#inheritAttrs
inheritAttrs Λ false ʹͯ͠ v-bind ʹ $attrs ΛͤOK <template> <label>
{{ label }} <input :value="value" v-on="listeners" v-bind="$attrs" /> </label> </template> <script> export default { inheritAttrs: false, // ଞͷͭ } </script>
݁ Controlled Component + Transparent Wrapper = ωΠςΟϒཁૉͬΆ͘ѻ͑Δಠࣗͷίϯϙʔωϯτ͕࡞ΕΔʂ
࠷ޙʹ ࣮υΩϡϝϯτʹ͞Βͬͱॻ͍ͯ͋Δ
Ջ͕͋ͬͨΒυΩϡϝϯτಡ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ