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=&#