tabbar选项卡+component动态组件的使用实例

已于 2022-09-22 19:42:30 修改
阅读量332 收藏
点赞数
分类专栏： js 文章标签： vue.js 前端 javascript
于 2022-09-22 13:59:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/redfore/article/details/126950485
版权

component用法

<keep-alive> 
  <component :is="componentName"></component> 
</keep-alive>

keep-alive在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，不使用的话组件被替换时会被销毁，再次使用时构造新的。

用例

有一个选项卡，标签的数量不是固定的，之后可能有扩展功能需要增加。切换标签即切换展示的组件。
用v-if判断当前生效组件名也可以，不过显得冗余。
可以使用component ，这样只需要在tabConfig里加入后面新增的组件信息，不必再修改html内容。

   <avue-tabs :option="{ column: tabConfig }" @change="handleChangeByTab" ref="avueTabs"></avue-tabs>
    <component :is="activeTab" :ref="activeTab" :invoiceId="formData.invoiceId"></component>

tabConfig是组件列表，里面有组件名和标签上要显示的label文本
handleChangeByTab 修改activeTab为当前组件名
invoiceId是自定义的要传给组件的内容。

不过如果不同组件要传入不同内容，还是要额外进行判断设置

redfore
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
TabBar-component:使用Vue封装的TabBar组件
03-19
标签栏 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
avue-在table每一行的可编辑某一列下拉框
一寸一寸光阴
03-06 3243
最终要实现的效果 双击某一行，出现下拉框进行编辑，然后保存 过程 1.在avue框架上添加@row-dblclick每一行的双击事件 2.在要编辑的option的column列添加change()事件，change事件中执行的是rowUpdate事件 代码 <template> <basic-container> <avue-crud ref="crud" :data="data" ..
avue常见参数说明（笔记）
qq_44872773的博客
04-20 4588
option: { labelWidth： 20, //标签宽度 gutter: 132, //间距 card: true, //是否列表公用 tabs: true, //开启选项卡 tabsActive: 3, //选项卡个数 emptyBtn: true, //是否显示清空按钮，默认true submitBtn: true, //是否显示提交按钮，默认true ..
avue-tabs设置默认选中的tab
小马甲
12-03 735
最近在用`avue`这个`UI`框架来开发页面，有用到`avue-tabs`这个`tab`切换组件。结果竟然发现`element-ui`中`el-tabs`的`v-model`在`avue-tabs`中竟然是没有用的，无法设置默认选中哪个`tab`。`avue`这个基于`element-ui`开发的`UI`框架竟然没有继承它的属性
Vue中根据不同状态切换 Tabs 标签页内容
明思齐的博客
06-02 5530
可以控制当前激活的标签页（即默认展示出来的页面）。组件用于包含多个标签页，每个标签页由。
手搓VUE-Tabs标签页(Vue/VueRouter/ElementPlus)
达瓦里氏的博客
04-26 1192
闲着没事就想着用Vue搭一个后台管理系统练练手,项目结构就不说了,那是后端的事情,这里只讲前端一些功能模块的实现。
vue动态组件实现选项卡切换效果
12-29
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码，供大家参考，具体内容如下 导航按钮： <div class=tab-title> <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/collectusedcars'>二手车</router></p> <p click=a><router-link to='/collec
动态组件（可模拟选项卡）
01-23 682
<div id="box"> <input type="button" value="加载aaa组件" @click="a='aaa'"> <input type="button" value="加载bbb组件" @click="a='bbb'"> <components :is="a"></components> </div>主要代码：<co
动态组件之vue选项卡
lihua130427的博客
10-23 226
keep-alive keep-alive译为活着—组件的失活缓存 失活缓存keep-alive： 重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来 接下来给大家分享一个选项卡代码 <!DOCTYPE html> <html> <head> <meta charset="ut...
react-ReactNavigation带有自定义动画的TabBarComponent
08-14
ReactNavigation - 带有自定义动画的TabBarComponent
小程序源码 自定义tabbar (代码+截图)
06-19
小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar ...
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
非常灵活易用的Android TabBar选项卡控件
11-23
灵活易用的Android自定义TabBar选项卡控件，支持Tab选项卡的任意View组合布局，支持事件接口回调，扩展性非常强大的选项卡，可用来排版任意样式的选项卡布局。
微信小程序——自定义tabbar（截图+源码）.zip
05-08
微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义tabbar（截图+源码）.zip 微信小程序——自定义...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 654
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 276
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 296
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 363
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 520
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
uniapp根据路由改变动态显示自定义tabbar组件怎么做
06-10
在uniapp中，可以使用条件渲染和动态组件来实现根据路由改变动态显示自定义tabbar组件的效果。 首先，在App.vue中定义一个自定义tabbar组件，如下所示： ```html <template> <view> <custom-tabbar v-if="showTabbar"></custom-tabbar> <router-view></router-view> </view> </template> <script> import CustomTabbar from '@/components/CustomTabbar' export default { components: { CustomTabbar }, computed: { showTabbar () { // 根据路由判断是否显示自定义tabbar组件 return this.$route.path !== '/home' } } } </script> ``` 在上面的代码中，我们使用了条件渲染来判断是否显示自定义tabbar组件。通过computed属性中的showTabbar函数，我们可以根据当前路由来判断是否显示自定义tabbar组件。如果当前路由为/home，则不显示自定义tabbar组件；否则，显示自定义tabbar组件。 接下来，在自定义tabbar组件中，我们可以使用动态组件来实现不同的tabbar样式。例如，我们可以定义一个Tabbar1组件和一个Tabbar2组件，分别表示两种不同的tabbar样式。在自定义tabbar组件中，我们可以根据路由来决定显示哪种样式的tabbar。代码如下： ```html <template> <view> <component :is="tabbarType"></component> </view> </template> <script> import Tabbar1 from '@/components/Tabbar1' import Tabbar2 from '@/components/Tabbar2' export default { components: { Tabbar1, Tabbar2 }, computed: { tabbarType () { // 根据路由判断显示哪种样式的tabbar return this.$route.path === '/home' ? 'Tabbar1' : 'Tabbar2' } } } </script> ``` 在上面的代码中，我们使用了动态组件来根据路由显示不同的tabbar样式。通过computed属性中的tabbarType函数，我们可以根据当前路由来决定显示哪种样式的tabbar。 最后，我们将自定义tabbar组件引入到App.vue中，并在路由发生变化时实现动态显示。这样，就可以根据路由改变动态显示自定义tabbar组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值