注意：
1、需要保障el-tabs组件里 v-model绑定的变量和 div里的is绑定的变量是同一个变量
2、el-tab-pane 里的name 和script里的组件名称是一致的
以下是实现代码
<template>
<div class="main-container">
<el-tabs v-model="currentView">
<el-tab-pane label="电视" name="Television"></el-tab-pane>
<el-tab-pane label="电影" name="Movie"></el-tab-pane>
<el-tab-pane label="综艺" name="Variety"></el-tab-pane>
</el-tabs>
<!--:is 的作用：会将div标签转换成 currentView 变量绑定的这个组件-->
<div :is="currentView" keep-alive></div>
</div>
</template>
<script>
export default {
components: {
//以下方式引入路由是路由的懒加载，有利于页面优化
Television: resolve => {
require(['./Television.vue'], resolve)
},
Movie: resolve => {
require(['./Movie.vue'], resolve)
},
Variety: resolve => {
require(['./Variety.vue'], resolve)
}
},
data() {
return{
currentView: 'EntrySettings', //当前组件
}
},
methods:{
},
created(){
}
}
</script>
