我们创建一个vue项目 引入一下element ui
然后在src下的components 下应该会有一个HelloWorld.vue 如果没有 那就自己写一个
HelloWorld.vue 参考代码如下
<template>
<div class="hello">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="系统配置信息" name="systemConfig">
<span>系统配置信息</span>
</el-tab-pane>
<el-tab-pane label="模块开关" name="moduleSwitch">
<span>模块开关</span>
</el-tab-pane>
<el-tab-pane label="操作项配置" name="operationBoxConfig">
<span>操作项配置</span>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
activeName:'systemConfig',
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
然后我们编写 App.vue代码
<template>
<div class="containers">
<el-button @click = "setGuaz">{
{ guaz?"关闭":"开启" }}</el-button>
<hello-world v-if = "guaz"/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
data () {
return {
guaz: true
}
},
components:{
HelloWorld
},
methods: {
setGuaz() {
this.guaz = !this.guaz;
},
},
mounted () {
}
}
</script>
<style lang="scss">
</style>
我们可以看到一个简单小案例 我们点击按键 下面的控件就会出现和消失
但我们会发现一个问题 当我们 切换到 第二和第三个时 在点击关闭 然后在打开 选择的就会变回第一个
因为 v-if 条件不成立 组件就被从DOM树上干掉了 在点击开启 组件就会被初始化 而初始化就会选中第一个
那我我们修改一下App.vue代码
<template>
<div class="containers">
<el-button @click = "setGuaz">{
{
guaz?"关闭":"开启" }}</el-button>
<keep-alive>
<hello-world v-if = "guaz"/>
</keep-alive>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
data () {
return {
guaz: true
}
},
components:{
HelloWorld
},
methods: {
setGuaz() {
this.guaz = !this.guaz;
},
},
mounted () {
}
}
</script>
<style lang="scss">
</style>
我们可以看到 我们给HelloWorld 组件 套上了一个keep-alive标签
然后我们在点击第二和第三个 然后在从上面点关闭 再开启 会发现选择的还是我们上次选择的那个 因为keep-alive会缓存组件 再次出现时会保留之前的操作结果