vue 组件的嵌套关系

最新推荐文章于 2025-03-18 09:21:26 发布

Манго нектар

最新推荐文章于 2025-03-18 09:21:26 发布

阅读量491

点赞数 18

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_74742670/article/details/142856304

版权

组件允许我们将 U1划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构
这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑

组件及引用关系

Header

<template>
<h3>Header</h3>
</template>

<script>

</script>

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

Main

<template>
    <div class="main">
    <h3>Mian</h3>
    <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

<template>
<div class="aside">
    <h3>Aside</h3>
    <Item />
    <Item />
    <Item />
</div>
    </template>
    
    <script>
    import Item from "./Item.vue"
    export default{
        components:{
            Item
        }
    }
    
    </script>
    
    <style scoped>
    .aside{
        float: right;
        width: 30%;
        height: 400px;
        border: 5px solid #999;
        box-sizing: border-box;
    }
    </style>

Article

template>
    <h3>Article</h3>
    </template>
    
    <script>
    
    </script>
    
    <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

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