vue-cli3 + ts @Emit，@Prop父子组件之间传值

@Emit和@Prop属于vue-property-decorator库，使用时需要先导入

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

1.父组件向子组件传值：

父组件代码：

<template>
    <div class="container">
        <!-- value需要子组件@Prop定义，这里把驼峰化横线 -->
        <child-com :parent-value="msg"></child-com>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import childCom from "路径";

@Component({
    components: {
        childCom    // 声明子组件
    }
})
export default class Parent extends Vue {
    private msg: string = "要传给子组件的值";
}
</script>

子组件代码：

<template>
    <div class="container">
        <!-- 这里显示父组件传来的值 -->
        {{parentValue}}
    </div>
</template>

<script lang="ts">
// 引入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);
    }
}
</script>

注意：：：如果是父组件向子组件动态传值（即变量）需要做以下更改：

子组件中接收变量的值需要有一个默认值，比如上面子组件中的代码：

 @Prop(String) 
 private parentValue: string = ""; // 这里默认给了一个空值

同时需要对这个变量进行监听，监听其变化：

@Watch("parentValue")
private onParentValue(newValue: any) {
    // 输出变化后的值
    console.log(newValue);
}

2.子组件向父组件传值

子组件代码：

<template>
    <div class="container">
        <!-- 方法一: 直接调用@Emit -->
        <button @click="handleToParent1">向父组件传值</button>
        <!-- 方法二: 直接调用@Emit -->
        <button @click="handleToParent2">向父组件传值</button>
        <!-- 方法三: 间接调用 -->
        <button @click="handleClickEvent">向父组件传值</button>
    </div>
</template>

<script lang="ts">
// 引入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();
    }
}
</script>

父组件代码：

<template>
    <div class="container">
        <!-- value需要子组件@Prop定义，这里把驼峰化横线 -->
        <child-com :parent-value="msg"></child-com>
        <!-- 方法一: 驼峰转横线 -->
        <child-com @handle-to-parent1="handleChildValue"></child-com>
        <!-- 方法二: 驼峰转横线. 注意，这里是用test接收的 -->
        <child-com @test="handleChildValue"></child-com>
        <!-- 方法三: 驼峰转横线 -->
        <child-com @handle-to-parent3="handleChildValue"></child-com>
    </div>
</template>

<script lang="ts">
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;
    }
}
</script>

如果要传递多个值，建议把这多个值封装成一个对象，然后一块传递。如：

// 子组件
@Emit()
private test() {
    // 要传给父组件的多个值
    const params = {
        param1: value1,
        param2: value2,
        // ......
    };
    return params;
}