vue 中如何实现点击父组件中“立即开始“，隐藏父组件的内容，显示子组件的内容

父组件模板

//父组件内容

<template>
   <div>
      <!--显示父组件内容-->
       <div v-if= "!showChild">

        <button @click="start">立即开始</button>
        <p>这里是父组件的内容...</p>

       </div>

   <!-- 显示子组件 -->
    <chatContent v-if="showChild" @go-back= "goBack"/>

  </div>

</template>

<script setup>

import {ref} from 'vue';
import chatContent from './chatContent.vue';  //导入子组件


const showChild = ref(false); // 用于控制显示子组件

//点击"立即开始"按钮的处理函数
const start = () => {
  showChild.value = true;

};

//点击子组件中'立即返回'按钮

const goBack = () =>{
  showChild.value = false;

};
</script>

子组件模板

<template>

   <div>
       <p>这里是子组件的内容</p>

       <button @click="goBack">返回</button>
   </div>

</template>

<script setup>
//子组件的逻辑代码


//增加返回按钮之后的功能逻辑

import {defineEmits} from 'vue';

const emit = defineEmits();

const goBack = () => {
    emit('go-back') // 触发自定义组件

}
</script>