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

K_B_Z 发布于2019-08-21 11:42 / 3193人阅读

摘要：使用实现切换中的实现对应的文件的懒加载在父组件中很多个按钮每个对应的内容都是不一样的，没有办法做成同一个模板来实现内容的显示。使用内置组件实现了这个功能。

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

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

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

每个tab对应的内容都是不一样的，没有办法做成同一个模板来实现内容的显示。但不能一上来就将所有的内容都加载上来，因为很多时候，客户是不可能查看所有的内容的。
一开始，我们使用了路由：

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

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

这样实现了tab切换使用懒加载。

2.表单输入框刷新

在一个页面中：

点击添加按钮如何实现添加输入框显示：

但是添加成功后，当再次添加时，上次输入的内容还在，

如何清除上次的内容呢，使用v-if只是实现输入框的显示与隐藏，无法实现清空内容，component组件又一次派上用场了。

这样就实现了录入后输入组件的清空

GPU云服务器云服务器输入框内容清空 js实现数据的懒加载图片 java表单框的组件 js实现tab切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87001.html

基于 Vue 的后台管理系统前端实践

摘要：输入框内容过滤产品有一个需求是，在搜索用户信息时，只能通过邮箱搜索，并且只能输入字母数字以及。我选择了输入框的值这里的坑就是需要在中更新值，因为元素这时才刷新。是否有一定要用的必要类似的管理系统涉及到不同页面之间的交互都很少。初始化项目使用 Vue-cli3 初始化项目1 安装 Element UI安装 Vue-i18n，做相关配置2,3 原则上需要对 Element 也做 I18...

scwang90 2019-08-23 12:13 评论0 收藏0
采用vue+webpack构建的单页应用——私人博客MintloG诞生记

摘要：我采用原生编写后台，因为感觉增删改查的功能很简单，就懒得用框架了其实是不会。浏览模式它也有一个，用来切换文章列表和文章详情，也就是和编辑模式它加载了作为工具栏，然后可以进行文章的撰写与修改。介绍项目地址：https://github.com/jrainlau/MintloG （特别乱，参考就好-_-|||）showImg(https://segmentfault.com/img/b...

Terry_Tai 2019-06-27 12:09 评论0 收藏0
构建一个自定义 angular2 输入组件

摘要：构建一个自定义输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。值访问器在完成上面的一些步骤之后，我们的组件基本功能完成了，但是接下来还有最重要的一部分内容，那就是让我们的自定义组件获得值访问权限。构建一个自定义 angular2 输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。在读这篇文章...

CNZPH 2019-08-02 15:56 评论0 收藏0
构建一个自定义 angular2 输入组件

摘要：构建一个自定义输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。值访问器在完成上面的一些步骤之后，我们的组件基本功能完成了，但是接下来还有最重要的一部分内容，那就是让我们的自定义组件获得值访问权限。构建一个自定义 angular2 输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。在读这篇文章...

pekonchan 2019-08-20 12:32 评论0 收藏0