Download as PDF, PPTX
Uploaded byYuta Ohashi
PDF, PPTX7,603 views
Vue.jsでFormをAtomic Designしてみた時のコンポーネント間のデータのやりとり
Laravel/Vue.js 勉強会 #10
Recommended
More Related Content
What's hot
Similar to Vue.jsでFormをAtomic Designしてみた時のコンポーネント間のデータのやりとり
More from Yuta Ohashi
Vue.jsでFormをAtomic Designしてみた時のコンポーネント間のデータのやりとり
- 1.
- 2.
- 3.3今⽇話すこと• Atomic Designって︖•Formをコンポーネントに分解してみる• コンポーネント間のデータのやりとり• まとめ
- 4.
- 5.
- 6.6Atomic Designって︖• BreadFrostさんが提唱• Atomsが集まってMoleculesに、Moleculesが集まってOrganismsに、Organismsが集まって・・・・Pageができる• ⼤きな要素を細分化して、⼩さい要素として捉える• 詳細は「Atomic Designとは︖」で検索 ＆ 原典を参照ください
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.24コンポーネント間のデータのやりとり• 基本的にデータはPagesかOrganismsで管理する• APIコールやStoreでデータを取得・保持する場合もPagesかOrganismsで•要するに、MoleculesやAtomsは状態をなるべく持たないようにする• 親⼦のコンポーネント間のやり取りは props in / events out で• 親から⼦にはpropsでデータを渡す• 親でpropsの値が変更されれば⼦に伝搬する• ⼦から親には$emitでイベントを発⾏し、データの変更を伝える• 親コンポーネントが⼦のイベントを検知する
- 25.25コンポーネント間のデータのやりとり• 基本的にデータはPagesかOrganismsで管理する• APIコールやStoreでデータを取得・保持する場合もPagesかOrganismsで•要するに、MoleculesやAtomsは状態をなるべく持たないようにする• 親⼦のコンポーネント間のやり取りは props in / events out で• 親から⼦にはpropsでデータを渡す• 親でpropsの値が変更されれば⼦に伝搬する• ⼦から親には$emitでイベントを発⾏し、データの変更を伝える• 親コンポーネントが⼦のイベントを検知する
- 26.
- 27.27コンポーネント間のデータのやりとりexport default {data() {return {user_id: "",password: "",mail_address: "",gender_box: "",birthday: ""}}}Organismsでデータを保持する
- 28.28コンポーネント間のデータのやりとり<template><form><user-id-box :user_id="user_id" @change="changeUserId"/><password-box :password="password" @change="~" /><mail-address-box :mail_address="mail_address" @change="~" /><gender-box :gender="gender" @change="~" /><birthday-box :birthday="birthday" @change="~" /><submit-button @click="doRegister">登録</submit-button></form></template>propsでデータを⼦コンポーネント(Molecules)に渡す
- 29.
- 30.30コンポーネント間のデータのやりとりexport default {props:{user_id: String},methods: {changeUserId: function (user_id) {this.$emit("change", user_id)}}}親(Organisms)からpropsでデータを受け取る
- 31.31コンポーネント間のデータのやりとり<template><div><form-label for="user_id">ユーザーID:</form-label><input-text :value="user_id"@change="changeUserId"/></div></template>さらに⼦コンポーネント(Atoms)にpropsでデータを渡す
- 32.32コンポーネント間のデータのやりとり<template><div><form-label for="user_id">ユーザーID:</form-label><input-text :value="user_id"@change="changeUserId"/></div></template>さらに⼦コンポーネント(Atoms)にpropsでデータを渡すv-bind:value で渡すのがここではちょっと重要（Atomsのコンポーネントで v-modelを使うため）
- 33.
- 34.34コンポーネント間のデータのやりとりexport default {props:{value: String},computed: {input_text: {get: function () {return this.value},set: function (value) {this.$emit("change", value)}}}}親(Molecules)からpropsでデータを受け取る
- 35.
- 36.36コンポーネント間のデータのやりとり<template><input type="text" v-model="input_text"></template>v-modelはv-bind:valueとv-on:inputを⼀度に設定してくれているhttps://jp.vuejs.org/v2/guide/components.html#コンポーネントで-v-model-を使う<template><inputtype="text”:value="input_text”@input="input_text = $event.$target.value”></template>
- 37.37コンポーネント間のデータのやりとりexport default {props:{value: String},computed: {input_text: {get: function () {return this.value},set: function (value) {this.$emit("change", value)}}}}v-modelの値の変更はcomputedプロパティで知る(のが多分定⽯)https://jp.vuejs.org/v2/guide/computed.html算出-Setter-関数
- 38.38コンポーネント間のデータのやりとりexport default {props:{value: String},computed: {input_text: {get: function () {return this.value},set: function (value) {this.$emit("change", value)}}}}inputの⼊⼒に変更があった場合に⼦コンポーネント(Atoms)がイベントを発⾏親コンポーネント(Molecules)でそのイベントを検知する
- 39.39コンポーネント間のデータのやりとりexport default {props:{value: String},computed: {input_text: {get: function () {return this.value},set: function (value) {this.$emit("change", value)}}}}親コンポーネント(Molecules)に変更を伝える場合は$emitを使う下記の場合は、親コンポーネントで定義したchangeイベントが呼び出され、valueの値を⼀緒に送る
- 40.40コンポーネント間のデータのやりとり<template><div><form-label for="user_id">ユーザーID:</form-label><input-text :value="user_id"@change="changeUserId"/></div></template>⼦コンポーネント(Atoms)のイベントを検知してchangeのイベントが呼び出されるのでchangeUserIdを実⾏する
- 41.41コンポーネント間のデータのやりとりexport default {props:{user_id: String},methods: {changeUserId: function (user_id) {this.$emit("change", user_id)}}}⼦コンポーネント(Atoms)から引数に変更された値が渡ってくるので⼦コンポーネント(Molecules)でイベントを発⾏し親コンポーネント(Organisms)でそのイベントを検知する
- 42.42コンポーネント間のデータのやりとり<template><form><user-id-box :user_id="user_id" @change="changeUserId"/><password-box :password="password" @change="~" /><mail-address-box :mail_address="mail_address" @change="~" /><gender-box :gender="gender" @change="~" /><birthday-box :birthday="birthday" @change="~" /><submit-button @click="doRegister">登録</submit-button></form></template>⼦コンポーネント(Molecules)のイベントを検知してchangeのイベントが呼び出されるのでchangeUserIdを実⾏する
- 43.43コンポーネント間のデータのやりとりexport default {data() {return {user_id: "",password: null,~~~~~~}},methods: {changeUserId (user_id) {this.user_id = user_id}}}⼦コンポーネント(Molecules)から引数に変更された値が渡ってくるのでOrganismsのdataを変更する
- 44.44コンポーネント間のデータのやりとりexport default {data() {return {user_id: "blue-goheimochi",password: null,~~~~~~}},methods: {changeUserId (user_id) {this.user_id = user_id}}}dataが変更されると親から⼦に変更が伝わってデータが更新される⼦コンポーネントでは値を管理せず、親のコンポーネントでpropsを変更することで⼦コンポーネントに伝搬させる
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.58シンプルにprops in /events outだけをみる
- 59.59コンポーネント間のデータのやりとりOrganisms Molecules Atomspropsin / events out値が変更されたらイベントを発⾏する
- 60.60コンポーネント間のデータのやりとりOrganisms Molecules Atomspropsin / events out⼦が発⾏したイベントを親が検知して値を受け取る
- 61.61コンポーネント間のデータのやりとりOrganisms Molecules Atomspropsin / events out検知した値とともにイベントを発⾏する
- 62.62コンポーネント間のデータのやりとりOrganisms Molecules Atomspropsin / events out⼦が発⾏したイベントを親が検知して値を受け取る
- 63.63コンポーネント間のデータのやりとりOrganisms Molecules Atomspropsin / events out値を設定する
- 64.64コンポーネント間のデータのやりとりOrganisms Molecules Atoms値が設定されたpropsin / events out
- 65.
- 66.
- 67.67コンポーネント間のデータのやりとりOrganisms Molecules Atomspropsin / events out値が更新される
- 68.
- 69.
- 70.
- 71.
- 72.72まとめ• Vue.jsでFormをAtomic Designしてみた•コンポーネントが複数階層の親⼦関係になる• データはなるべく上位の親で管理• Organismsより上でデータは持つ• Molecules、Atomsに状態は持たない• うまいこと親⼦間でデータをやりとりする• props in / events out が⼤事• 実際に⼿を動かして感覚をつかみましょう︕