Vue项目中Ts组件传参

父传子

父组件

<template>
    <div>
        <!-- 属性传值                          -->
        <indexs :fatherInfo="fatherInfo"  />
        <fin-card>子组件传递的数据：{{ sonMsg }}</fin-card>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import indexs from './indexs.vue';
@Component({
    components: {
        indexs,
    },
})
export default class HelloWorld extends Vue {
    fatherInfo: String = 'hello son';//父组件数据
   
}
</script>

<style scoped lang="scss">
</style>

子组件

<template>
    <div>
        <div>{{ fatherInfo }}</div>
    </div>
</template>

<script lang='ts'>
//  引入 Prop Emit 
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
@Component
export default class YourComponent extends Vue {
    @Prop({
        type: String, //；类型
        required: false,//是否必填
        default: '',// 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
    })
    fatherInfo!: String;
}
</script>

<style scoped lang="scss">
</style>

子传父

父组件

<template>
    <div>
        <!-- 属性传值                       自定义事件    -->
        <indexs  @getSonMsg="getSonMsg" />
        <fin-card>子组件传递的数据：{{ sonMsg }}</fin-card>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import indexs from './indexs.vue';
@Component({
    components: {
        indexs,
    },
})
export default class HelloWorld extends Vue {
    sonMsg: String = '';
    getSonMsg(sonMsg: String) {
        // 接受
        this.sonMsg = sonMsg;
    }
}
</script>

<style scoped lang="scss">
</style>

子组件

<template>
    <div>
        <fin-button type='primary' @click="sendMsg">Send</fin-button>
    </div>
</template>

<script lang='ts'>
//  引入 Prop Emit 
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
@Component
export default class YourComponent extends Vue {
    sonMsg: String = 'hello father';
    // getSonMsg 父组件引用子组件上 绑定的事件名  send 处理给父组件传值的逻辑
    @Emit('getSonMsg') send(sonMsg: String) {}
    sendMsg() {
        this.send(this.sonMsg);
    }
}
</script>

<style scoped lang="scss">
</style>