tabs + 组件使用会导致什么呢？

问题： 在使用tabs加组件，切换tabs时，组件内部的created钩子函数没有被调用， 无法实现组件内部更具tabs切换，刷新数据。

    <breadcrumb></breadcrumb>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label"><i class="el-icon-document-checked"></i> 可开发票</span>
        <yesApplyInvoice></yesApplyInvoice>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"><i class="el-icon-document-delete"></i> 不可开票</span>
        <noApplyInvoice></noApplyInvoice>
      </el-tab-pane>
    </el-tabs>
  </div>

想法： 根据实践证明，当切换组件时，页面已经渲染完成，不会再重新走生命周期。所以我们点击tabs组件内部的created函数是不会被调用的。

解决： 根据业务场景，需要我们切换tabs就要刷新组件内部获取的数据，对代码做出修改如下。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

<template>
  <div>
    <breadcrumb></breadcrumb>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label"><i class="el-icon-document-checked"></i> 可开发票</span>
        
        //在组件使用处加上 v-if会是组件从新渲染， 从而达到走生命周期函数的目的。 此时组件内部的created就会被调用了。 
        <yesApplyInvoice  v-if="activeName==='first'"></yesApplyInvoice>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"><i class="el-icon-document-delete"></i> 不可开票</span>
        <noApplyInvoice  v-if="activeName==='second'"></noApplyInvoice>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import breadcrumb from '../../../components/Breadcrumb.vue'
import yesApplyInvoice from './YesApplyInvoice'
import noApplyInvoice from './NoApplyInvoice'

export default {
  components: {
    breadcrumb,
    yesApplyInvoice,
    noApplyInvoice
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    // searchSubmit () {
    //   if (this.activeName === 'first') {
    //     this.$refs.child1.getInfoList()
    //   } else if (this.activeName === 'second') {
    //     this.$refs.child2.getInfoList()
    //   } else if (this.activeName === 'third') {
    //     this.$refs.child3.getInfoList()
    //   }
    // },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less">
  .el-tabs--border-card>.el-tabs__content {
    padding: 10px 13px;
  }
</style>

// 组件内部created
created () {
  this.getInfoList()
  this.contractNameList()
},