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.6k
Vue コンポーネント実装パターン
v-meetup vol.7 でのLT資料です。
seya
May 22, 2018
Tweet
Share
More Decks by seya
See All by seya
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
1.4k
エンジニアにオススメの Figma 活用
kazuyaseki
16
13k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.4k
フロントエンド開発のための Figma
kazuyaseki
20
24k
PWAに取り組む前に知っておきたい SPAとSEO
kazuyaseki
10
3.8k
State of SEO for SPA 2018
kazuyaseki
8
4.7k
Selenium あるある
kazuyaseki
0
1.6k
Other Decks in Programming
See All in Programming
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
180
仕様と実装で学ぶOpenTelemetry
drumato
2
1.1k
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
430
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
100
GoでParserを書く
karupanerura
3
350
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
CQRS meets modern Java
simas
PRO
2
470
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
760
酒飲んでたらテックリードになった話
spbaya0141
0
210
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
140
TypeScriptのパフォーマンス改善
yajihum
14
5.1k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Why Our Code Smells
bkeepers
PRO
331
56k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Writing Fast Ruby
sferik
622
60k
Documentation Writing (for coders)
carmenintech
60
4k
Product Roadmaps are Hard
iamctodd
45
9.8k
The Brand Is Dead. Long Live the Brand.
mthomps
49
30k
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 = ωΠςΟϒཁૉͬΆ͘ѻ͑Δಠࣗͷίϯϙʔωϯτ͕࡞ΕΔʂ
࠷ޙʹ ࣮υΩϡϝϯτʹ͞Βͬͱॻ͍ͯ͋Δ
Ջ͕͋ͬͨΒυΩϡϝϯτಡ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ