这篇文章主要为大家详细介绍了用Vue封装导航栏组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：把一个功能模块使用组件化的思想充分封装，如导航栏，这无论对我们的开发思想还是效率都有许多好处，在开发中，我们要尽量多得运用组件化的开发思想，不要把所有代码都写在同一个.vue文件中，这样能大大提高代码的可读性。
封装导航栏
主要思路：把红色的部分当成一个个组件，而他们只是图片和文字不同，所以我们可以把他们封装成同一个组件，然后向组件里传入图片信息和文字信息即可(可以用插槽)。
//TabBarItem.vue <div class="tabBarItem"> <div> </div><div> </div><div> </div></div> .tabBarItem{ flex: 1; font-size: 12px; } .tabBarItem img{ margin-top: 3px; width: 24px; padding-bottom:3px ; }
接下来就是封装一个把这4个选项放在同一个地方的容器。
//TabBar.vue <div class="tabBar"> <a>本文来源gao($daima.com搞@代@#码(网</a></div> .tabBar{ display: flex; height: 49px; position: fixed; left: 0; right: 0; bottom: 0; text-align: center; box-shadow: 0px -1px 1px rgba(100, 100, 100, .1); background-color: #f6f6f6; }
再接下来就是使用了，给每一个不同的TabBarItem的插槽写入不同的图片和文字信息。
//MainTabBar.vue <div class="mainTabBar"> <div>首页</div> <div>分类</div> <div>购物车</div> <div>我的</div></div>
导航栏一般都在主页中使用，所以我们把这个导航栏放在App.vue
<div id="app"> </div> import MainTabBar from "components/content/tabbar/MainTabBar"; export default { name: 'App', components:{ MainTabBar } }
总结：这样看来，我们写一个导航栏用了3个文件，这可能看起来是麻烦的，但这也大大提高了代码的可读性，如果我们还需要在该项目别的地方使用导航栏，我们只需要直接创建一个MainTabBar类似的文件，然后把你要的图片和文字写进入即可，甚至于在别的项目用到时，我们可以直接将文件拷贝过去就能够直接使用，连CSS样式都不需要我们去写，这就大大提高了我们的开发效率。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
您可能感兴趣的文章:
- 五分钟教你使用vue-cli3创建项目(新手入门)
- vue项目中less的一些使用小技巧
- 如何在Vue项目中应用TypeScript类
- Vue.js 实现tab切换并变色操作讲解
- Vuex总体案例详解
- vue中点击切换按钮功能之点启用后按钮变为禁用
- Vue组件通信方法案例总结
- Vue.js slot插槽的作用域插槽用法详解
- 关于Vue代码可读性的几点建议
以上就是用Vue封装导航栏组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：用Vue封装导航栏组件
转载请注明原文链接：用Vue封装导航栏组件
