Vue中处理组件切换的三种方式

Vue中处理组件切换的三种方式：

1.v-if切换： v-if的方式来切换视图:创建和销毁(导致组件的状态不能留存)
2.v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态)
3.动态组件切换： 可以操作DOM, 并且可以留存下数据; 切换时触发的生命周期： 激活activated 冻结 deactivated 这两个方法; 用keep-alive可保存组件的状态

代码示例:

<template>
<div>
<button @click="isShow='HelloWorld'"
:class="{active:isShow==='HelloWorld'}"
>HelloWorld</button>
<button @click="isShow='Hello'"
:class="{active:isShow==='Hello'}"
>Hello</button>
<button @click="isShow='World'"
:class="{active:isShow==='World'}"
>World</button>
<!-- v-if的方式来切换视图:
创建和销毁，(导致组件的状态不能留存) -->
<!-- <HelloWorld v-if="isShow==='HelloWorld'"></HelloWorld>
<Hello v-if="isShow==='Hello'"></Hello>
<World v-if="isShow==='World'"></World> -->
<!-- v-show的方式切换组件：
显示和隐藏，没有办法操作DOM结构 -->
<!-- <HelloWorld v-show="isShow==='HelloWorld'"></HelloWorld>
<Hello v-show="isShow==='Hello'"></Hello>
<World v-show="isShow==='World'"></World> -->
<!-- 动态组件切换： 可以操作DOM, 并且可以留存下数据
-->
<keep-alive>
<transition name='slide-fade'>
<component :is="isShow"></component>
</transition>
</keep-alive>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Hello from './components/Hello'
import World from './components/World'
export default{
data() {
return {
isShow:'HelloWorld'
}
},
components:{
HelloWorld,
Hello,
World
}
}
</script>
<style lang="scss">
.active{
background:hotpink;
color:#ccc;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>

最后

以上就是隐形朋友为你收集整理的Vue中处理组件切换的三种方式的全部内容，希望文章能够帮你解决Vue中处理组件切换的三种方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。