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


index
 ● 自己紹介
 ● Vue.jsのコンポーネント間のやりとり（demo）
 ○ props
 ○ emit
 ○ getter, setter
 ○ v-model
 ○ 配列・オブジェクトの変更
 ○ refs
 ● まとめ


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


Props：親→子へのデータ受け渡し
 // script部分 public message = "メッセージ"; // template部分 // script部分 @Prop() message!: string; @Prop() message2!: string; 
 Parent.vue
 Child.vue
 message = “メッセージ” 
 message2 = “message” 
 ・変数展開したい場合はコロン付き 
 ・リテラルの場合はコロンなし 


Props：親→子へのデータ受け渡し
 // script部分 public message = "メッセージ"; // template部分 // script部分 @Prop(Number) message!: number; @Prop({default: 'default'}) message2!: string; 
 Parent.vue
 Child.vue
 ・型指定も可能 （コンソールエラーを出してくれる） ・デフォルト値が指定可能 
 message2 = 'default' 


Props：親→子へのデータ受け渡し
 // script部分 public message = "メッセージ"; // template部分 // script部分 @Prop() message!: string; @Prop() message2!: string; public changeMessage() { this.message = "書き換え"; } 
 Parent.vue
 Child.vue
 ・子での直接書き換えはNG 
 ・親側で書き換える


emit：親←子 のデータ受け渡し
 // script部分 public message = "メッセージ"; public changeMessage(val: string){ this.message = val; } // template部分 
 // script部分 @Prop() message!: string; public changeMessage(){ this.$emit("onChange", "message"); }
 
 Parent.vue
 Child.vue
 ・イベント経由で親に”message”を送る 
 ・Propの値は親側で変更する 
 val = ”message”


gettter, setter：Prop値を扱うのに便利
 // script部分 public changeMessage(val: string){ this.message = val; } // template部分 // script部分 @Prop() message!: string; get internalMessage (): string { return this.message; } set internalMessage (val: string) { this.$emit("onChange", val); } Parent.vue
 Child.vue
 子ではinternalMessageを触ればOK 


v-model：valueとinputイベントの組み合わせ
 // script部分 public changeMessage(val: string){ this.message = val; } // template部分 
 
 // script部分 @Prop() value!: string; public changeMessage(val: string){ this.$emit("input", val); } 
 Parent.vue
 Child.vue
 ・Propのvalueで受け取り 
 ・emitのinputイベントで親に通知 


v-model：valueとinputイベントの組み合わせ
 // template部分 
 
 // script部分 @Prop() value!: string; public changeMessage(val: string){ this.$emit("input", val); } 
 Parent.vue
 Child.vue
 ・Propのvalueで受け取り 
 ・emitのinputイベントで親に通知 
 messageの変更イベントを書く 必要もない


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


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


まとめ
 ● props：親→子、子で値を触ることはできない
 ● emit：親←子、イベント経由で値を渡せる
 ● getter,setter：Prop値が扱いやすくなる
 ● v-model：valueとinputイベントの組み合わせ
 ● 配列：子から中身は触れる、変更はメソッドを利用する
 ● オブジェクト：配列と同様
 ● refs：親から子の要素を触れる、参照はできない


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