父组件
---
<template>
    <v-btn @click="showChild1">
    	显示子组件1
    </v-btn>
    
    <v-btn @click="hideChild1">
    	隐藏子组件1
    </v-btn>
    
    <Child1
        :active="active"
        :mode="mode"
        @hide="hideChild1">
    </Child1>
</template>

<script setup>
...

import Child1 from "@/views/Child1.vue";

...

const active = ref(false);
const mode = ref(null);

function showChild1() {
    active.value = true;
    mode.value = '子组件属性';
}

function hideChild1() {
    active.value = false;
    mode.value = null;
}
</script>

子组件
---
<template>
    <v-card
        v-show="active"
        title="子组件1"
        :text="`控制方式：${mode}`">
        <v-card-actions>
            <v-btn @click="$emit('hide', false)">
                隐藏
            </v-btn>
        </v-card-actions>
    </v-card>
</template>

<script setup>
const props = defineProps({
    active: {
        type: Boolean,
        default: false
    },
    mode: {
        type: String,
        default: null
    },
});
</script>

父组件
---
<template>
   <v-btn @click="showChild2('子组件方法')">
       显示子组件2
   </v-btn>
   
   <v-btn @click="hideChild2">
       隐藏子组件2
   </v-btn>
   
   <Child2 ref="child2"></Child2>
</template>

<script setup>
...

import Child2 from "@/views/Child2.vue";

...

const child2 = ref(null);

function showChild2(mode) {
    child2.value.show({
        mode
    });
}

function hideChild2() {
    child2.value.hide();
}
</script>

子组件
---
<template>
    <v-card
        v-show="active"
        title="子组件2"
        :text="`控制方式：${mode}`">
        <v-card-actions>
            <v-btn @click="hide">
                隐藏
            </v-btn>
        </v-card-actions>
    </v-card>
</template>

<script setup>
...

defineExpose({
    show,
    hide,
});

const active = ref(false);
const mode = ref(null);

function show(options) {
    active.value = true;
    if(options){
    	mode.value = options.mode;
    }
}

function hide() {
    active.value = false;
    mode.value = null;
}
</script>