Vue3实战之AsideBox组件的封装与使用

侧边栏组件封装

侧边栏主要由 搜索、最新文章、标签、归档四个基础模块构成,通过观察我们可以发现一个共性,就是样式基本一致,只是对应的相关内容略有区别。

那么我们是否可以考虑,将这四个模块封装到一个组件当中,根据在父组件传入的类型显示不同的布局和内容。

Vue3实战之AsideBox组件的封装与使用_第1张图片

在src/components目录下创建一个AsideBox.vue的组件,内容基本如下: