VUE框架Vue3组件切换页面准备------VUE框架

<template>
    <div class="s1">
        <h1>我是App组件</h1>
        <YeYe></YeYe>
    </div>
</template>
 
<script>
import YeYe from "./components/YeYe.vue";
export default {
    name : "App",
    components : {YeYe}
}
</script>
 
<style lang="css" scoped>
    .s1{
        width : 500px;
        height : 500px;
        background-color: aquamarine;
    }
</style>

<template>
    <div class="s3">
        <h1>我是儿子组件</h1>
         <SunZi></SunZi>
    </div>
</template>
 
<script>
import SunZi from "./SunZi.vue"
export default {
    name : "ErZi",
    components : {SunZi}
}
</script>
 
<style lang="css" scoped>
    .s3{
        width : 300px;
        height : 300px;
        background-color: chartreuse;
    }
</style>

<template>
    <div class="s2">
        <h1>我是爷爷组件</h1>
        <SunZi></SunZi>
    </div>
</template>
 
<script>
import SunZi from "./ErZi.vue";
export default {
    name : "YeYe",
    components : {SunZi}
}
</script>
 
<style lang="css" scoped>
    .s2{
        width : 400px;
        height : 400px;
        background-color: bisque;
    }
</style>

<template>
    <div class="s4">
        <h1>我是孙子组件</h1>
        <button @click="">弹窗</button>
        <div v-show="isShow" class="s">
            我是一个窗口
            <button @click="">关闭窗口</button>
        </div>
    </div>
</template>
 
<script>
import {ref} from "vue";
export default {
    name : "SunZi",
    setup(){
        let isShow = ref(true);
        return {isShow};
    }
}
</script>
 
<style lang="css" scoped>
    .s4{
        width : 200px;
        height : 200px;
        background-color: darkmagenta;
    }
    .s{
        width: 250px;
        height: 250px;
        background-color: cadetblue;
    }
</style>