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

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や
 勉強会を開催しています！
 ご参加お待ちしています！
 ラクス 
 中途 
 フロントエンドエンジニアも募集しています。