vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...

本文介绍了在Vue 2.0项目中如何利用内置组件`component`实现tab切换的懒加载,避免路由导致的tab跳转问题。同时,通过示例展示了如何在表单提交成功后清空输入框内容,确保每次添加操作前输入框均为初始状态。
摘要由CSDN通过智能技术生成

最近项目中使用了vue2.0 官网脚手架进行了开发。开发中的踩一些坑一直没有来得及整理。本篇文章就vuejs内置组件component的一些使用进行一些总结。

1.使用component 实现tab切换中的实现对应的文件的懒加载

在父组件中很多个tab按钮,

c6f456eaad2d220639406c8e25c9c98b.png

每个tab对应的内容都是不一样的,没有办法做成同一个模板来实现内容的显示。但不能一上来就将所有的内容都加载上来,因为很多时候,客户是不可能查看所有的内容的。

一开始,我们使用了 路由:

使用了路由实现了懒加载,随后发现,如果在tab点击多次的话,就会产生一个问题就是,点击回退按钮的时候,tab显示会蹦来蹦去的,知道所有的历史记录倒退完了,怎么解决既能实现懒加载又不出现tab蹦来蹦去的现象。使用vuejs 内置组件component实现了这个功能。

使用element-ui中的tab标签和component结合实现了这个功能:

// 异步引入组件

const lszpzCont = resolve => require(['../applyManage/liushuipingzheng/applyManage.vue'], resolve)

const lszhzCont = resolve => require(['../tableManage/huizong/search.vue'], resolve)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值