最近项目中使用了vue2.0 官网脚手架进行了开发。开发中的踩一些坑一直没有来得及整理。本篇文章就vuejs内置组件component的一些使用进行一些总结。
1.使用component 实现tab切换中的实现对应的文件的懒加载
在父组件中很多个tab按钮,
每个tab对应的内容都是不一样的,没有办法做成同一个模板来实现内容的显示。但不能一上来就将所有的内容都加载上来,因为很多时候,客户是不可能查看所有的内容的。一开始,我们使用了路由
: 使用了路由实现了
懒加载
,随后发现,如果在tab点击多次的话,就会产生一个问题就是,点击回退按钮的时候,tab显示会蹦来蹦去的,知道所有的历史记录倒退完了,怎么解决既能实现懒加载
又不出现tab蹦来蹦去的现象。使用vuejs 内置组件component实现了这个功能。
使用element-ui中的tab标签和component结合实现了这个功能:
这样实现了tab切换使用懒加载。
2.表单输入框刷新
在一个页面中:
点击添加
按钮如何实现添加输入框显示: 但是添加成功后,当再次添加时,上次输入的内容还在,
如何清除上次的内容呢,使用v-if只是实现输入框的显示与隐藏,无法实现清空内容,component组件又一次派上用场了。
这样就实现了录入后输入组件的清空