『VUE』20. 组件嵌套关系page（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

因为前面已经有很多vue了,这次是新建了一个third下的新项目.老样子做一些处理
去掉vue自带的默认的css样式,并且删掉原来的vue,把app.vue清空

VUE的自带组件结构

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

---

新建文件搭建结构

在src下新建page文件夹,创建上图中的文件

  <Header /><Main /><Aside /><Item /><Article />

app与Main Header Aside结构

在app中导入了Main Header Aside

App.vue

<script>
import Header from "./page/Header.vue";
import Main from "./page/Main.vue";
import Aside from "./page/Aside.vue";export default {components: {Header,Main,Aside,},
};
</script><template><Header /><Main /><Aside />
</template><style scoped></style>

Header.vue

<template><div class="header"><h3>Header</h3></div>
</template><script></script><style scoped>
.header {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 scoped>
.main {float: left;width: 70%;height: 400px;border: 5px solid #999;box-sizing: border-box;border-top: 0;
}
</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 scoped>
.aside {float: right;width: 30%;height: 400px;border: 5px solid #999;box-sizing: border-box;border-left: 0;border-top: 0;
}
</style>

Main 与Article.Aside与Item结构

在Main 中导入了Article
在Aside中导入了Item

Article.vue

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

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

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---