【vue3入门】-【19】组件嵌套关系

组件嵌套关系

组件允许我们将UI划分为独立的，可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被阻止成层层嵌套的树状结构

这和我们嵌套HTML元素的方式类似，Vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容和逻辑

APP.vue

<template>
  <!--主要要生效Header中的样式，需要删除main.json中默认的main.css样式-->
  <Header />
  <Main />
  <Aside />
</template>
<script>
import Header from './pages/header.vue'
import Main from './pages/main.vue'
import Aside from './pages/aside.vue'

export default {
  components: {
    Header,
    Main,
    Aside
  }
}
</script>
<style></style>

header.vue

<template>
    <h3>header</h3>
</template>
<style scoped>
h3 {
    width: 100%;
    height: 100px;
    border: 5px solid #999;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
}
</style>

main.vue

<template>
    <div class="main">
        <h3>Main</h3>
        <Article />
        <Article />
    </div>
</template>
<script>
import Article from "./Article.vue"


export default {
    components: {
        Article
    }
}
</script>
<style>
.main {
    float: left;
    width: 70%;
    height: 600px;
    border: 5px solid #999;
    box-sizing: border-box;

}
</style>

aside.vue

<template>
    <div class="aside">
        <h3>Aside</h3>
        <Item />
        <Item />
        <Item />
    </div>
</template>
<script>
import Item from './Item.vue'
    
export default{
    components:{
        Item
    }

}
</script>
<style>
.aside{
    float: right;
    width: 30%;
    height: 600px;
    border: 5px solid #999;
    box-sizing: border-box;
}
</style>

article.vue

<template>
    <div class="article">
        <h3>Article</h3>
    </div>
</template>
<script>
export default{

}
</script>
<style>
.article{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 50px;
    background: #999;

}
</style>

Item.vue

<template>
    <div class="item">
        <h3>Item</h3>
    </div>
</template>
<script>
export default{

}
</script>
<style>
.item{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 10px;
    background: #999;

}
</style>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9