Typescript+vue cli3组件传参

子传父
父组件：

<template>
      <div>
            <son @add='add'></son>
      </div>
</template>
<script lang='ts'>
    import { Component, Vue } from "vue-property-decorator";
    import son from "../components/son.vue";
    @Component({
          components: {
            son
        }
    })
    export default class Father extends Vue {
       protected data: any = [];
      //子组件传递的参数是个对象所以这边接收也要定义对象接收
       add(obj: any) {
            this.data.push(obj);
            console.log(this.data);
        }
    }
</script>

子组件：

<template>
    <div>
          <button @click="add"></button>
    </div>
</template>

<script lang='ts'>
     import { Component, Vue, Emit } from 'vue-property-decorator';
    //要引入Emit向父组件传参
    @Component({

    })
    export default class Son extends Vue {
        public name: string = "";
        public age: string = "";
        public sex: string = "";
        public height: string = "";
        @Emit("add")  
        send(obj: any) {  // send 处理给父组件传值的逻辑
                //
        } //里面写个（//）注释是因为里面不能为空
        add() {
            this.send({name: this.name, age: this.age, sex: this.sex, height: this.height })
        }
    }
</script>

父传子
父组件：

<template>
      <div>
            <son :flag='flag'></son>
      </div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import list from "../components/list.vue"
@Component({
  components: {
    list
  },
export default class Father extends Vue {
      protected flag:Boolean=false;
}
</script>

子组件：

<template>
      <div>
          <span>{{ flag }}</span>
      </div>
</template>
<script lang='ts'>
import {Component, Prop, Vue} from "vue-property-decorator";
    @Component({

    })

    export default class Son extends Vue {
        // 接受父组件的值 
        @Prop({
            type: boolean, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        })  flag!: boolean;

        created() {}
    }
</script>

---

兄弟组件传参的话就让一个组件传给父组件，父组件再传给另一个子组件，实现起来比较麻烦，或者可以使用vuex将数据存储在公共管理工具中，官网上说有个vuex-class的插件，我也没用过，用的还是es6的扩展运算符的方式对vuex进行传值等操作，效果都是一样的