最近项目中使用了vue2.0 官网脚手架进行了开发。开发中的踩一些坑一直没有来得及整理。本篇文章就vuejs内置组件component的一些使用进行一些总结。
1.使用component 实现tab切换中的实现对应的文件的懒加载
在父组件中很多个tab按钮,
每个tab对应的内容都是不一样的,没有办法做成同一个模板来实现内容的显示。但不能一上来就将所有的内容都加载上来,因为很多时候,客户是不可能查看所有的内容的。
一开始,我们使用了 路由
:
使用了路由实现了
懒加载
,随后发现,如果在tab点击多次的话,就会产生一个问题就是,点击回退按钮的时候,tab显示会蹦来蹦去的,知道所有的历史记录倒退完了,怎么解决既能实现懒加载
又不出现tab蹦来蹦去的现象。使用vuejs 内置组件component实现了这个功能。
使用element-ui中的tab标签和component结合实现了这个功能:
<template>
<el-tabs v-model="activeName" @tab-click="handleClick" :value='collectItems.applyTab'>
<el-tab-pane label="详细信息" name="first">
<detail-cont :detailObj='detailObjPare' :zheTag='zheTag' @getPlan='getPlan' @wrapEvent='wrapEvent'></detail-cont>
</el-tab-pane>
<el-tab-pane label="现金流水账凭证" name="second">
<component :detail='detailObjPare' :is="lszpzVue" ></component>
</el-tab-pane>
<el-tab-pane label="流水账汇总表" name="third">
<component :detail='detailObjPare' :is="lszhzVue"></component>
</el-tab-pane>
<el-tab-pane label="资金明细表" name="fourth">
<component :detail='detailObjPare' :is="zjmxVue"></component>
</el-tab-pane>
<el-tab-pane label="现金流量表" name="five">
<component :detail='detailObjPare' :is="xjllVue"></component>
</el-tab-pane>
<el-tab-pane label="初级利润表" name="six">
<component :detail='detailObjPare' :is="cjlrVue"></component>
</el-tab-pane>
<el-tab-pane label="初级资产负债表" name="sevent">
<component :detail='detailObjPare' :is="zcfzVue"></component>
</el-tab-pane>
</el-tabs>
<el-tabs v-model="activeName" @tab-click="handleClick" :value='collectItems.applyTab'>
<el-tab-pane label="详细信息" name="first">
<detail-cont :detailObj='detailObjPare' :zheTag='zheTag' @getPlan='getPlan' @wrapEvent='wrapEvent'></detail-cont>
</el-tab-pane>
<el-tab-pane label="现金流水账凭证" name="second">
<component :detail='detailObjPare' :is="lszpzVue" ></component>
</el-tab-pane>
<el-tab-pane label="流水账汇总表" name="third">
<component :detail='detailObjPare' :is="lszhzVue"></component>
</el-tab-pane>
<el-tab-pane label="资金明细表" name="fourth">
<component :detail='detailObjPare' :is="zjmxVue"></component>
</el-tab-pane>
<el-tab-pane label="现金流量表" name="five">
<component :detail='detailObjPare' :is="xjllVue"></component>
</el-tab-pane>
<el-tab-pane label="初级利润表" name="six">
<component :detail='detailObjPare' :is="cjlrVue"></component>
</el-tab-pane>
<el-tab-pane label="初级资产负债表" name="sevent">
<component :detail='detailObjPare' :is="zcfzVue"></component>
</el-tab-pane>
</el-tabs>
</template>
<script>
// 异步引入组件
const lszpzCont = resolve => require(['../applyManage/liushuipingzheng/applyManage.vue'], resolve)
const lszhzCont = resolve => require(['../tableManage/huizong/search.vue'], resolve)
const zjmxCont = resolve => require(['../tableManage/capitalList/mingxi.vue'], resolve)
const xjllCont = resolve => require(['../tableManage/liuliang/liuliangNav.vue'], resolve)
const cjlrCont = resolve => require(['../tableManage/first/cjlrC.vue'], resolve)
const zcfzCont = resolve =>require(['../tableManage/first/cjzcfzC.vue'], resolve)
export default {
name: 'tabname',
methods: {
handleClick (tab, event) {
this.$store.commit('changeapplyTab', tab.name)
this.checkVue(tab.name)
},
checkVue (name) {
switch (name) {
case 'second' :
// console.log('second')
this.lszpzVue = lszpzCont
break
case 'third' :
// console.log('third')
this.lszhzVue = lszhzCont
break
case 'fourth' :
// console.log('fourth')
this.zjmxVue = zjmxCont
break
case 'five' :
// console.log('five')
this.xjllVue = xjllCont
break
case 'six' :
// console.log('six')
this.cjlrVue = cjlrCont
break
case 'sevent' :
// console.log('sevent')
this.zcfzVue = zcfzCont
break
}
}
}
}
</script>
这样实现了tab切换使用懒加载。
2.表单输入框刷新
在一个页面中:
点击添加
按钮如何实现添加输入框显示:
但是添加成功后,当再次添加时,上次输入的内容还在,
如何清除上次的内容呢,使用v-if只是实现输入框的显示与隐藏,无法实现清空内容,component组件又一次派上用场了。
<template>
<button @click="addCard"></button>
<component @showHide="recieveAddData" :is="addModal"
></component>
</template>
<script>
const modal = resolve => require(['./company/modal.vue'], resolve)
export default {
name: 'addCard',
data () {
return {
addModal: null
}
},
methods: {
// 显示输入框
add () {
this.addModal = modal
},
// 输入提交成功后
recieveAddData (data) {
switch (data) {
case 1:
this.modifyTipShow = true
this.modifyTip = '添加成功'
this.checkAccoutList() // 添加成功后,更新列表
break
case 2:
this.modifyTipShow = true
this.modifyTip = '添加失败, 请重试!'
if (window.sessionStorage.arrowS123) {
this.modifyTip = window.sessionStorage.arrowS123
}
}
// 录入成功后,隐藏输入框
this.addModal = null
},
}
}
</script>
这样就实现了录入后输入组件的清空