vue里的component动态组件
1.动态组件
在不同组件之间进行动态切换
2.应用
- 实际项目代码设计中,为了保证
复用性
和可维护性
,是会有一些可行的方案。这里我们采用vue内置的component组件
来实现这一点。
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
- 当在这些组件之间
切换
的时候,你有时会想保持这些组件的状态
,以避免反复重渲染
导致的性能问题。例如我们来展开说一说这个多标签界面:
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
3.例子(上面解释看不懂的看这里)
在不同组件之间进行动态切换
其实component动态组件就是通过控制currentTabComponent
来切换不同的组件
<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>