动态组件:多个组件使用同一个挂载,并动态切换,使用is特性 :is=""
<div class="content">
<Component :is="tabList && tabList[active] && tabList[active].component"></Component>
</div>
is绑定组件的是组件name属性值,也可以绑定一个组件的构造器选项对象。
<script>
// 依稀啊组件根据自己的实际情况去写,这里就是举例
import Video from './components/Video'
import Material from './components/Material'
import Collection from './components/Collection'
import Handbook from './components/Handbook'
import Exam from './components/Exam'
import TrainingClass from './components/TrainingClass'
import BusinessSchool from './components/BusinessSchool'
export default {
name: 'Index',
mixins: [],
components: { Video, Material, Collection, Handbook, Exam, TrainingClass, BusinessSchool },
props: {},
data () {
return {
tabList: [
{ menuName: '1', component: 'Video' },
{ menuName: '2', component: 'Material' },
{ menuName: '3, component: 'Handbook' },
{ menuName: '4', component: 'BusinessSchool' },
{ menuName: '5', component: 'Exam' },
{ menuName: '6', component: 'TrainingClass' }
],
active: 0
}
},
methods: {
clickTab (index) {
this.active = index
},
setCurrentTab (activeName) {
let currentIndex = this.tabList.findIndex(item => item.menuName === activeName)
if (currentIndex) {
this.active = currentIndex || 0
}
}
},
filters: {},
created () { },
mounted () {
let { activeName } = this.$route.query
console.log(this.$route.query)
if (activeName) {
this.setCurrentTab(activeName)
}
},
activated () {
let { activeName } = this.$route.query
if (activeName) {
this.setCurrentTab(activeName)
}
}
}
</script>