vue前端开发自学,组件的嵌套关系demo

news2024/12/28 19:14:26

vue前端开发自学,组件的嵌套关系demo!今天开始分享的，前端开发经常用到的，组件的嵌套关系案例代码。下面先给大家看看，代码执行效果。

如图，这个是代码执行后，的效果布局！

下面给大家贴出来源码。方便大家自己在本地电脑上调试练习，你可以自己手动输入，强化记忆。都行。

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

这个是Article.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 scoped>
.aside{
    float: right;
    width:30%;
    height: 600px;
    border:5px solid #999;
    box-sizing: border-box;
    
}
h3{
    border-left:0px;
}
</style>

这个是Aside.vue的源码，如上所示。

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

这个是Header.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>

这个是Item.vue的源码，如上所示。

<template>
    <div class="main">
        <h3>Main</h3>
        <Article />
        <Article />
    </div>
</template>
<script>
    import Article from './Article.vue';
    export default{
        components:{
            Article
        }
    }
</script>
<style scoped>
.main{
    float: left;
    width: 70%;
    height: 600px;
    border: 5px solid #999;
    box-sizing: border-box;
    
}
h3{
    border-right:0px;
}
</style>

这个是Main.vue的源码，如上所示。

<template>
  <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>

这个是App.vue，入口文件的源码，如图所示。

介绍说明，这个可以看出来，我们采用的都是局部引用的方式，vue其实还有一个叫全局注册（全局引用）的方式，那个不利于项目打包，还有也不利于逻辑关系的分辨，所以官方不推荐使用全局引用！大家可以根据个人的情况，自己斟酌到底是局部，还是全局。一般来说，都是局部引用较为常见的。