vue3父组件调取子组件方法

1.父组件index.vue

<template>
    <div>
        <el-form-item label="" label-width="0px">
          <el-button type="primary" @click="methods.search">查询</el-button>
        </el-form-item>
        <Child ref='child' type='1' />
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted,onBeforeUnmount, defineExpose} from "vue";
    import Child from "child.vue";

    let child= ref(null);  // 子组件

    let methods = {
        search(){
          child.value.methods.init();
        },
    }
    
</script>

2.子组件child.vue

<template>
    
</template>
<script setup lang="ts">
    import { ref, reactive, onMounted, defineExpose} from "vue";
    interface Props {
        type?: any;
    }
    let props = withDefaults(defineProps<Props>(), {
       type: () => '',
    });
    
    let methods = {
        init(){
            console.log(111)
        }
    };
    onMounted(() => {
        methods.init();
      });
    defineExpose({
        methods
    });
</script>