用Vue封装导航栏组件

前言:把一个功能模块使用组件化的思想充分封装,如导航栏,这无论对我们的开发思想还是效率都有许多好处,在开发中,我们要尽量多得运用组件化的开发思想,不要把所有代码都写在同一个.vue文件中,这样能大大提高代码的可读性。

封装导航栏

主要思路:把红色的部分当成一个个组件,而他们只是图片和文字不同,所以我们可以把他们封装成同一个组件,然后向组件里传入图片信息和文字信息即可(可以用插槽)。

//TabBarItem.vue




接下来就是封装一个把这4个选项放在同一个地方的容器。

//TabBar.vue




再接下来就是使用了,给每一个不同的TabBarItem的插槽写入不同的图片和文字信息。

//MainTabBar.vue



导航栏一般都在主页中使用,所以我们把这个导航栏放在App.vue