tabbar选项卡+component动态组件的使用实例

component用法

<keep-alive> 
  <component :is="componentName"></component> 
</keep-alive>

keep-alive在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，不使用的话组件被替换时会被销毁，再次使用时构造新的。

用例

有一个选项卡，标签的数量不是固定的，之后可能有扩展功能需要增加。切换标签即切换展示的组件。
用v-if判断当前生效组件名也可以，不过显得冗余。
可以使用component ，这样只需要在tabConfig里加入后面新增的组件信息，不必再修改html内容。

   <avue-tabs :option="{ column: tabConfig }" @change="handleChangeByTab" ref="avueTabs"></avue-tabs>
    <component :is="activeTab" :ref="activeTab" :invoiceId="formData.invoiceId"></component>

tabConfig是组件列表，里面有组件名和标签上要显示的label文本
handleChangeByTab 修改activeTab为当前组件名
invoiceId是自定义的要传给组件的内容。

不过如果不同组件要传入不同内容，还是要额外进行判断设置