11. 组件嵌套关系

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

（1）创建组件及引用关系

创建新项目后，我们删掉src/components下的所有文件。并且删除App.vue里的内容。方便我们干净的创建组件和引用关系。

我们在src文件夹下创建个pages文件夹。并创建以下文件：

• Header.vue

• App.vue里引入Header

我们就可以看到页面显示了。

我们继续写其他的：（记得在App.vue里自行引入）

• Main.vue

• Aside.vue

• 这个时候，我们大概就可以看到页面整体的样式了

• Articke

引用要注意：

最上面图我们可以看到，Articke是在Main里的，所以我们要在Main里引用这个组件，而不是App.vue

Main.vue

我们接着写下个组件Item，同样在Aside里要引用三个

Item.vue

全部写完后我们看下页面，就完成了

以上就是组件嵌套关系的介绍和写法。如果同学们自己写一遍的话，就会理解和熟悉。