Vue element UI tabs中动态添加组件

element ui 中Tabs:
https://element.eleme.io/#/zh-CN/component/tabs
它的例子很简单,tabs中都是文字,但是一般情况下,我们的tabs中间都是组件,那么该如何写呢?很容易想到,用v-for就行了






这样,貌似没有问题,但是接着往下开发的时候,我们会发现,每次换tab的时候,子组件的mounted()函数都会被触发4次。这是因为每次我们按tab的时候,都有4个子组件被渲染。所以我们要用v-if来选择渲染的组件。






这样就可以每次只触发一个组件了。如果有两层,三层tabs,只需要在下一层的上添加上一层的v-if


你可能感兴趣的:(Vue element UI tabs中动态添加组件)