Vue组件封装TabBar 1.首先把TabBar进行拆分 首先把最下面当作一个整体的TabBar组件,然后每一个菜单就是一个组件,且四个组件都是一样的。下一步进行创建组件。 目录结构如下: 首先创建一个大的组件tabBar用于后面包裹4个tabBarItem,创建好该组件然后得展示,那么就得在App.vue中导入该组件,然后进行注册, 然后编写tabBarItem,因为这里得4个都是一样的,为了封装的TabBar更加的灵活,所以这里就利用slot插槽。 大组件tabBar的写法 路由配置: