$30 off During Our Annual Pro Sale. View Details »

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

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

hatsune

July 01, 2020
Tweet

More Decks by hatsune

Other Decks in Programming

Transcript

  1. コンポーネント間のやりとり

    いろいろ試してみた

    株式会社ラクス

    UI開発課

    北嶋 初音


    View Slide

  2. index

    ● 自己紹介

    ● Vue.jsのコンポーネント間のやりとり(demo)

    ○ props

    ○ emit

    ○ getter, setter

    ○ v-model

    ○ 配列・オブジェクトの変更

    ○ refs

    ● まとめ


    View Slide

  3. 自己紹介:北嶋 初音

    ● Web業界5年目

    ● 前職ではバックエンドも触ってた

    ● 今年1月にラクスに入ってからフロントエンド専任

    ● 新規サービスの開発に参画中

    +


    View Slide

  4. Props:親→子へのデータ受け渡し

    // script部分
    public message = "メッセージ";
    // template部分
    :message="message"
    message2="message"
    />
    // script部分
    @Prop() message!: string;
    @Prop() message2!: string;

    Parent.vue
 Child.vue

    message = “メッセージ” 

    message2 = “message” 

    ・変数展開したい場合はコロン付き 

    ・リテラルの場合はコロンなし 


    View Slide

  5. Props:親→子へのデータ受け渡し

    // script部分
    public message = "メッセージ";
    // template部分
    :message="message"
    />
    // script部分
    @Prop(Number) message!: number;
    @Prop({default: 'default'})
    message2!: string;

    Parent.vue
 Child.vue

    ・型指定も可能
    (コンソールエラーを出してくれる)
    ・デフォルト値が指定可能 

    message2 = 'default' 


    View Slide

  6. Props:親→子へのデータ受け渡し

    // script部分
    public message = "メッセージ";
    // template部分
    :message="message"
    message2="message"
    />
    // script部分
    @Prop() message!: string;
    @Prop() message2!: string;
    public changeMessage() {
    this.message = "書き換え";
    }

    Parent.vue
 Child.vue

    ・子での直接書き換えはNG 

    ・親側で書き換える


    View Slide

  7. emit:親←子 のデータ受け渡し

    // script部分
    public message = "メッセージ";
    public changeMessage(val: string){
    this.message = val;
    }
    // template部分
    :message="message"
    @onChange="changeMessage"
    />

    // script部分
    @Prop() message!: string;
    public changeMessage(){
    this.$emit("onChange", "message");
    }


    Parent.vue
 Child.vue

    ・イベント経由で親に”message”を送る 

    ・Propの値は親側で変更する 

    val = ”message”


    View Slide

  8. gettter, setter:Prop値を扱うのに便利

    // script部分
    public changeMessage(val: string){
    this.message = val;
    }
    // template部分
    @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 


    View Slide

  9. v-model:valueとinputイベントの組み合わせ

    // script部分
    public changeMessage(val: string){
    this.message = val;
    }
    // template部分
    :value="message"
    @input="changeMessage"
    />


    // script部分
    @Prop() value!: string;
    public changeMessage(val: string){
    this.$emit("input", val);
    }

    Parent.vue
 Child.vue

    ・Propのvalueで受け取り 

    ・emitのinputイベントで親に通知 


    View Slide

  10. v-model:valueとinputイベントの組み合わせ

    // template部分
    v-model="message"
    />


    // script部分
    @Prop() value!: string;
    public changeMessage(val: string){
    this.$emit("input", val);
    }

    Parent.vue
 Child.vue

    ・Propのvalueで受け取り 

    ・emitのinputイベントで親に通知 

    messageの変更イベントを書く
    必要もない


    View Slide

  11. 配列・オブジェクトの変更

    // script部分
    messages: string[] = ["test1"];
    // template部分

    @Prop() messages!: string[];
    public changeMessage(): void {
    // コンソールエラー
    this.messages = ["書き換え"];
    // エラーはないけど変更が検知されない
    this.messages[0] = "書き換え";
    // エラーもなく変更も検知される
    this.messages.push("追加");
    }
    Parent.vue
 Child.vue

    ・配列、オブジェクトの中身は子でも
    書き換えできてしまう 

    ・変更を検知させるには配列、オブ
    ジェクトのメソッドを使うこと 


    View Slide

  12. refs:子の要素を触る

    // script部分
    public changeMessage(): void {
    this.$refs.child.message = "test";
    this.$refs.child.changeMessage()
    }
    // template部分

    {{ $refs.child.message }}
    // script部分
    public message = "子のメッセージ";
    public changeMessage(): void {
    this.message = "書き換え";
    }

    Parent.vue
 Child.vue

    ・子どもの変数の書き換えは可能 

    ・子どものメソッドの実行は可能 

    参照はできない


    View Slide

  13. まとめ

    ● props:親→子、子で値を触ることはできない

    ● emit:親←子、イベント経由で値を渡せる

    ● getter,setter:Prop値が扱いやすくなる

    ● v-model:valueとinputイベントの組み合わせ

    ● 配列:子から中身は触れる、変更はメソッドを利用する

    ● オブジェクト:配列と同様

    ● refs:親から子の要素を触れる、参照はできない


    View Slide

  14. ラクスでは定期的にMeetupや

    勉強会を開催しています!

    ご参加お待ちしています!

    ラクス

    中途

    フロントエンドエンジニアも募集しています。 


    View Slide