<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="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="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="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>
<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>