当前位置: 首页 > Web前端 > HTML5

vuejs内置的component组件实现tab切换延迟加载和清除表单输入框内容

时间:2023-04-05 13:48:03 HTML5

最近在项目中使用vue2.0官网脚手架进行开发。踩了一些开发中的坑还没来得及梳理。本文总结了vuejs内置的component组件的一些使用。1、使用组件实现tab切换时对应文件的懒加载。父组件中有很多tab按钮,每个tab对应的内容都不一样。没有办法制作相同的模板来显示内容。但是你不能一上传就加载所有的内容,因为在很多情况下,客户不可能看到所有的内容。一开始我们使用路由:使用路由实现懒加载,后来发现如果多次点击tab会出现点击返回按钮时tab显示会跳来跳去的问题。知道所有历史记录都回归了,怎么解决懒加载的问题,tabs不跳来跳去。该功能是使用vuejs内置的component组件实现的。这个功能是通过element-ui中的tab标签和组件结合实现的:tab-panelabel="详细信息"name="first"><component:detail='detailObjPare':is="xjllVue">这样使用懒加载实现tab切换2.页面刷新表单输入框:点击添加按钮,实现添加输入框的显示:但是添加成功后,再次添加时,上次输入的内容还在,如何清除最后一个内容,使用v-if只是实现了输入框的显示和隐藏,并不能清除内容,component组件又派上用场了。这样就实现了录入清空组件的