vuejs 內置組件component實現tab切換懶加載和表單輸入框內容的清空

最近項目中使用了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>

這樣就實現了錄入後輸入組件的清空