Vue 動態渲染組件

方法一:

 <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="editTab" class="indexTabs">
           <el-tab-pane v-for='item in tabList' :key='item.name' :label="item.title" :name='item.name'>
                 <keep-alive> 
                  <component :is='currentTabComponent' :name='index' ref='customerInfo' :customerData='customerData'></component>
                 </keep-alive>
           </el-tab-pane>  
         </el-tabs> 

<keep-alive> - 組件切換保留數據

方法二:

 <el-tab-pane v-for='item in tabList' :key='item.name' :label="item.title" :name='item.name'>
                 <keep-alive>
                 <tab-component :index='index' :name='index' ref='customerInfo'>
                 </tab-component>  
                 </keep-alive>
           </el-tab-pane>  

   //組件渲染
        renderComp(_activeNum){
            let _self=this,_comp;
             if(_self.tabsParams){
                _comp=_self.match[_activeNum].component
             }else{
                _comp=_self.tabList[_activeNum].content
             }
          
              var tabCompnent= Vue.component('tab-component',{
                  render:function(h){
                  return h(_comp)
             }
             });
                 console.log(this.$refs.customerInfo)  //獲取子組件
             },