知识点:
1.
./是相对路径;
@/是src目录下的
2.组件标签用烤串命名;组件模板只能有一个顶级元素
3.slice() 方法会选取从 start 到end(默认数组结尾)数组的所有元素
思路:
1.分成三各组件,listHeader.vue,listContent.vue,listFooter.vue
![](https://i-blog.csdnimg.cn/blog_migrate/d78157a0d749dc07791cfbc4e1ea02d8.png)
2.公共css直接引入;
![](https://i-blog.csdnimg.cn/blog_migrate/cd0984a33c823c341380349571abe94d.png)
也可以处理后再引入
![](https://i-blog.csdnimg.cn/blog_migrate/ccf0f886593ace90047648c39def933b.png)
3.父子组件通信流程:传参~接收~使用
![](https://i-blog.csdnimg.cn/blog_migrate/bda38d89d382727e2b2925855848fd74.png)
4.兄弟组件通信流程:(子1->父->子2)
![](https://i-blog.csdnimg.cn/blog_migrate/21773abdf1abca00b93953f21bb02124.png)