vue中--父组件调用子组件方法 ref实现 + ts内使用报错问题(断言解决)

开篇：最近需要编写一个组件互相传递消息，首先是父组件调用子组件方法并传值，在网上找到ref可以实现那么开始搞。

vue  ref  调用子组件的方法(原生)

定义子组件son.vue

组件内定义方法

methods:{
    showToast(msg){
        console.log(msg)
    }
}

父组件引入子组件，并声明ref

父组件里面的方法通过ref执行子组件的方法

<template>
    <view>
        <view @click="show">点击我传递信息</view>
        <son ref="readmy"></son>
    </view>
</template>

<script>
    import Son '@/components/son.vue';
    export default {
        components: { Son },
        methods:{
            show(){
                this.$refs.readmy.showToast("我是传递过去的信息");    
            }
        }
    }
</script>

vue  ref  调用子组件的方法(TS)

这里我引入了两个插件，一个 TypeScript  /  第二个 vue-property-decorator (尤大大推出用类的方式写ts)

这里创建一个son.vue

<template>
    <div>我是son.vue</div>
</template>
<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";

    @Component({})
    export default class Son extends Vue{
       sendMsg(msg) {
           console.log(msg)
       }
    }
</script>

父组件引入子组件，并声明ref

父组件里面的方法通过ref执行子组件的方法

<template>
    <div>
        <div @click="sendMessage">点击我传递信息</div>
        <son ref="readmy"></son>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Son from "../../component/Son.vue";

    @Component({ components: { Son} })
    export default class Log extends Vue {
        sendMessage() {
           this.$refs.readmy.sendMsg('我是点击传递过来的数据啊')
        }
    }
</script>

然后我满心期待运行，然后就报错了....

what the fuсk！！！！

这个问题困扰了我一整天，在百度也没遇到和我有一样问题的人。

然后第二天早晨睡醒就想出来了，这说明有问题解决不了需要多睡觉。

写这篇博客就是希望和我遇到一样问题的人能翻到我的博客。能帮助到你们。

断言，把数据断言成----子类类型

setTimeout(() => {
   (this.$refs.mainIframe as Son).sendMsg('我是点击传递过来的数据啊')
   console.log(this.$refs.mainIframe)
}, 2000);