コンポーネント間のデータやりとりを色々試してみた.pdf

 コンポーネント間のデータやりとりを色々試してみた.pdf

B85111454fe19a425c375a28bc27996b?s=128

hatsune

July 01, 2020
Tweet

Transcript

  1. コンポーネント間のやりとり
 いろいろ試してみた
 株式会社ラクス
 UI開発課
 北嶋 初音


  2. index
 • 自己紹介
 • Vue.jsのコンポーネント間のやりとり(demo)
 ◦ props
 ◦ emit
 ◦

    getter, setter
 ◦ v-model
 ◦ 配列・オブジェクトの変更
 ◦ refs
 • まとめ

  3. 自己紹介:北嶋 初音
 • Web業界5年目
 • 前職ではバックエンドも触ってた
 • 今年1月にラクスに入ってからフロントエンド専任
 • 新規サービスの開発に参画中


    +

  4. Props:親→子へのデータ受け渡し
 // script部分 public message = "メッセージ"; // template部分 <child

    :message="message" message2="message" /> // script部分 @Prop() message!: string; @Prop() message2!: string; 
 Parent.vue
 Child.vue
 message = “メッセージ” 
 message2 = “message” 
 ・変数展開したい場合はコロン付き 
 ・リテラルの場合はコロンなし 

  5. Props:親→子へのデータ受け渡し
 // script部分 public message = "メッセージ"; // template部分 <child

    :message="message" /> // script部分 @Prop(Number) message!: number; @Prop({default: 'default'}) message2!: string; 
 Parent.vue
 Child.vue
 ・型指定も可能 (コンソールエラーを出してくれる) ・デフォルト値が指定可能 
 message2 = 'default' 

  6. Props:親→子へのデータ受け渡し
 // script部分 public message = "メッセージ"; // template部分 <child

    :message="message" message2="message" /> // script部分 @Prop() message!: string; @Prop() message2!: string; public changeMessage() { this.message = "書き換え"; } 
 Parent.vue
 Child.vue
 ・子での直接書き換えはNG 
 ・親側で書き換える

  7. emit:親←子 のデータ受け渡し
 // script部分 public message = "メッセージ"; public changeMessage(val:

    string){ this.message = val; } // template部分 <child :message="message" @onChange="changeMessage" />
 // script部分 @Prop() message!: string; public changeMessage(){ this.$emit("onChange", "message"); }
 
 Parent.vue
 Child.vue
 ・イベント経由で親に”message”を送る 
 ・Propの値は親側で変更する 
 val = ”message”

  8. gettter, setter:Prop値を扱うのに便利
 // script部分 public changeMessage(val: string){ this.message = val;

    } // template部分 <child @onChange="changeMessage" /> // script部分 @Prop() message!: string; get internalMessage (): string { return this.message; } set internalMessage (val: string) { this.$emit("onChange", val); } Parent.vue
 Child.vue
 子ではinternalMessageを触ればOK 

  9. v-model:valueとinputイベントの組み合わせ
 // script部分 public changeMessage(val: string){ this.message = val; }

    // template部分 <child :value="message" @input="changeMessage" />
 
 // script部分 @Prop() value!: string; public changeMessage(val: string){ this.$emit("input", val); } 
 Parent.vue
 Child.vue
 ・Propのvalueで受け取り 
 ・emitのinputイベントで親に通知 

  10. v-model:valueとinputイベントの組み合わせ
 // template部分 <child v-model="message" />
 
 // script部分 @Prop()

    value!: string; public changeMessage(val: string){ this.$emit("input", val); } 
 Parent.vue
 Child.vue
 ・Propのvalueで受け取り 
 ・emitのinputイベントで親に通知 
 messageの変更イベントを書く 必要もない

  11. 配列・オブジェクトの変更
 // script部分 messages: string[] = ["test1"]; // template部分 <child

    :messages="messages" />
 @Prop() messages!: string[]; public changeMessage(): void { // コンソールエラー this.messages = ["書き換え"]; // エラーはないけど変更が検知されない this.messages[0] = "書き換え"; // エラーもなく変更も検知される this.messages.push("追加"); } Parent.vue
 Child.vue
 ・配列、オブジェクトの中身は子でも 書き換えできてしまう 
 ・変更を検知させるには配列、オブ ジェクトのメソッドを使うこと 

  12. refs:子の要素を触る
 // script部分 public changeMessage(): void { this.$refs.child.message = "test";

    this.$refs.child.changeMessage() } // template部分 <child ref="child" /> <div>{{ $refs.child.message }}</div> // script部分 public message = "子のメッセージ"; public changeMessage(): void { this.message = "書き換え"; } 
 Parent.vue
 Child.vue
 ・子どもの変数の書き換えは可能 
 ・子どものメソッドの実行は可能 
 参照はできない

  13. まとめ
 • props:親→子、子で値を触ることはできない
 • emit:親←子、イベント経由で値を渡せる
 • getter,setter:Prop値が扱いやすくなる
 • v-model:valueとinputイベントの組み合わせ
 •

    配列:子から中身は触れる、変更はメソッドを利用する
 • オブジェクト:配列と同様
 • refs:親から子の要素を触れる、参照はできない

  14. ラクスでは定期的にMeetupや
 勉強会を開催しています!
 ご参加お待ちしています!
 ラクス 
 中途 
 フロントエンドエンジニアも募集しています。