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

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其实还有一个叫全局注册（全局引用）的方式，那个不利于项目打包，还有也不利于逻辑关系的分辨，所以官方不推荐使用全局引用！大家可以根据个人的情况，自己斟酌到底是局部，还是全局。一般来说，都是局部引用较为常见的。