vue+element-ui el-tabs 标签实现在同一页面切换组件

注意：
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>