09： vue3 组件嵌套关系

组件嵌套关系

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

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

创建组件及引用关系

项目中新建pages文件夹，然后添加如下组件

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>
        <Article></Article>
    </div>
    
</template>

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

Aside.vue 

<template>
    <div class="aside">
        <h3>Aside</h3>
        <Item></Item>
        <Item></Item>
        <Item></Item>
    </div>
</template>
<script>
import Item from './Item.vue';

export default{
    components:{
        Item
    }
}
</script>
<style scoped>
.aside{
    float: right;
    width:29%;
    height: 400px;
    border: 5px solid #999;
    box-sizing: border-box;
    
}
</style>

Article.vue

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

Item.vue

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

App.vue

<template>

<!-- 第三步：显示组件 -->
<Header></Header>
<Main></Main>
<Aside></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>