Element Vue-cli 动态Tabs标签页增删怎样给每个标签页传vue组件？

Question

现在的需求是：用Element里面的Tabs标签页做一个办公系统，每个Tab对应一个独立的工作区。也就是说，每打开一个Tab都要渲染一个固定的vue组件。

目前我是想通过item.content传组件到每一个标签页内部，然后各个标签页自己的功能跳转就用vue-router实现了。因为Tab数目要可以动态增删，所以肯定得用v-for，目前是这样的：

这个Tabs标签页是写在App.vue里面的。

这个item里面的content信息是Element定好的，但是问题就在于我不知道怎么通过它传一个vue组件过去。试过iframe，但那个src似乎又没法填。

之前还试过把{{item.content}}改成<router-view>然后用router来解决，尽管这样可以正常显示vue组件，但会导致每个标签页显示的内容同步，导致标签页失去独立性。

所以，目前最好是能通过content传一个vue组件过去。不知道朱军有什么头绪吗。

Answer 1

你可以传一个组件名称，然后在el-tab-panel里用v-if判断名称，显示相应的组件