注意：
1仑性、需要保障el-tabs組件里 v-model綁定的變量和 div里的is綁定的變量是同一個(gè)變量
2惶楼、el-tab-pane 里的name 和script里的組件名稱是一致的
以下是實(shí)現(xiàn)代碼
<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 的作用：會(huì)將div標(biāo)簽轉(zhuǎn)換成 currentView 變量綁定的這個(gè)組件-->
<div :is="currentView" keep-alive></div>
</div>
</template>
<script>
export default {
components: {
//以下方式引入路由是路由的懶加載，有利于頁面優(yōu)化
Television: resolve => {
require(['./Television.vue'], resolve)
},
Movie: resolve => {
require(['./Movie.vue'], resolve)
},
Variety: resolve => {
require(['./Variety.vue'], resolve)
}
},
data() {
return{
currentView: 'EntrySettings', //當(dāng)前組件
}
},
methods:{
},
created(){
}
}
</script>
