vue-cli 3+ts@Emit,@Prop親子コンポーネント間転送

@Emitと@Propはvue-property-decoratorライブラリに属し、使用時に先にインポートする必要があります.

import { Component, Vue, Prop, Emit } from "vue-property-decorator";

1.親コンポーネントから子コンポーネントへの値の入力:
親コンポーネントコード:

import { Component, Vue } from "vue-property-decorator";
import childCom from "  ";

@Component({
    components: {
        childCom    //      
    }
})
export default class Parent extends Vue {
    private msg: string = "        ";
}

サブアセンブリコード:

//   Prop
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Child extends Vue {
    @Prop(String)    //               
    private parentValue: string; //         parentValue  

    prvate crated() {
        //   
        console.log(this.parentValue);
    }
}

注:親コンポーネントが子コンポーネントに動的に値を伝える場合(変数)は、次の変更が必要です.
サブアセンブリで変数を受信する値には、上位サブアセンブリのコードなどのデフォルト値が必要です.

 @Prop(String) 
 private parentValue: string = ""; //           

同時に、この変数をリスニングし、その変化をリスニングする必要があります.

@Watch("parentValue")
private onParentValue(newValue: any) {
    //        
    console.log(newValue);
}

2.子コンポーネントから親コンポーネントへの値の伝達
サブアセンブリコード:

//   Emit
import { Component, Vue, Emit } from "vue-property-decorator";

@Component
export default class Child extends Vue {
    //           
    private msg: string = "         ";


    //    
    @Emit()    
    private handleToParent1() {
        return this.msg;    // return      
    }

    //    :   ，           @Emit("test")    test   ，test           。（test）     
    @Emit("test")    
    private handleToParent2() {
        return this.msg;    // return      
    }

    //    
    //            （    、 ）
    @Emit() 
    private handleToParent3() {
        return this.msg;    // return      
    }
    private handleClickEvent() {
        // ...        
        //         
        this.handleToParent3();
    }
}

親コンポーネントコード:

import { Component, Vue } from "vue-property-decorator";
import childCom from "  ";

@Component({
    components: {
        childCom    //      
    }
})
export default class Parent extends Vue {
    private msg: string = "        ";
    
    private childValue: string = "";

    //            val：     
    private handleChildValue(val: string) {
        // val:         
        this.childValue = val;
    }
}

複数の値を渡す場合は、複数の値を1つのオブジェクトにカプセル化し、ブロックで渡すことをお勧めします.次のようになります.

//    
@Emit()
private test() {
    //           
    const params = {
        param1: value1,
        param2: value2,
        // ......
    };
    return params;
}