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

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

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

每个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)

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

}

}

}

}

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

2.表单输入框刷新

在一个页面中：

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

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

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

>

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

},

}

}

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