Vue3中父组件调子组件里的方法

Vue3 中 一般使用 script setup 语法糖，在子组件使用 defineExpose 来配合父组件中访问，但如果项目不是用的 script setup 语法糖，那就无法正常使用。 得回归 $refs 机制，具体如下：

1.图解

2.代码.子组件

export default defineComponent({
    ...,
    setup(props, ctx) {
        // 子组件中定义的方法
        function socketMsgIn(e) {
          console.log("header->socketMsgIn", e);
        }
    },
    ...
    return {
        // 返回 需要被父组件调用的 方法
        socketMsgIn
    }
})

3.代码.父组件

<template>
    <!--使用子组件-->
    <TrainHeader ref="trainHead" />
</template>
<script lang="ts">
    // 引入子组件
    import TrainHeader from "./components/header.vue";
    import { defineComponent, ref, getCurrentInstance, reactive} from "vue";
    export default defineComponent({
        // 注册子组件
        components:{
            TrainHeader
        },
        setup() {
            // 获取当前组件实例代理
            const { proxy } = getCurrentInstance();
            
            function test(){
                // 通过proxy调用子组件内部的方法
                proxy.$refs["trainHead"].socketMsgIn(e);
            }
        }
    })
</script>