一、动态组件:在不同组件之间进行动态切换
<div @click="reload">点击切换</div>
<component :is="currentTabComponent"></component>
<script>
import childOne from './childOne'
import childTwo from './childTwo'
export default {
componets:{
childOne,
childTwo
},
data(){
currentTabComponent: 'childOne'
},
methods:{
reload(){
this.currentTabComponent = 'childTwo'
}
}
}
</script>
二、组件的刷新
<div @click="reload">点击刷新组件</div>
<childOne v-if="isRouterAlive"></childOne >
<script>
import childOne from './childOne'
export default {
componets:{
childOne
},
data(){
isRouterAlive: true
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>