vue3中setup中调用子组件方法

1. 方法一：

子组件

<script setup>
import { onMounted, getCurrentInstance } from 'vue';
const { appContext } = getCurrentInstance();
const $API = appContext.config.globalProperties.$API;
const props = defineProps({
    CompanyId: {
        type: String,
        required: true
    }
});
const getBanner = async (CompanyId) => {
    //获取横幅
    console.log('CompanyId', CompanyId);

    let Banner = await $API.PDataClient.areaBanner.list.get({ companyId: CompanyId });
    console.log('Banner', Banner);
};

onMounted(() => {
    // getBanner(props.CompanyId);
});
// 使用 defineExpose 将方法暴露给父组件
defineExpose({
    getBanner
});
</script>

父组件

<row11 ref="refrow11" :CompanyId="CompanyId"></row11>
<script setup>
import { ref, onMounted, onUnmounted, reactive, getCurrentInstance } from 'vue';
const refrow11 = ref(null);
onMounted(() => {
    CompanyId.value = route.query.id;
    refrow11.value.getBanner(CompanyId.value);
   
});

2. 方法二：

子组件不变还是之前子组件

父组件调用

<row11 ref="refrow11" :CompanyId="CompanyId"></row11>
<script setup>
import {onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
onMounted(() => {
    CompanyId.value = route.query.id;
    proxy.$refs.refrow11.getBanner(CompanyId.value);
});