<Component>
- 使用动态组件<Component>可以实现两个组件间来回切换，我们只需要传给is属性对应的组件名即可
- 当切换成另一个组件时候，当前组件会被销毁，另一个组件将被重新创建，原本示例上的数据不会保存
Dynamic.vue
<template>
<div>
<el-button-group>
<el-button @click="componentName='DynamicA'">DynamicA</el-button>
<el-button @click="componentName='DynamicB'">DynamicB</el-button>
</el-button-group>
<!--
被传给 :is 的值是被注册的组件名
-->
<component :is="componentName"></component>
</div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
name: '',
components: {
DynamicA,
DynamicB,
},
data() {
return {
componentName: ''
}
}
}
</script>
<style>
</style>
DynamicA.vue
<template>
<div class="dynamicA">
DynamicA
<div>
<el-button @click="count+=1">count+1</el-button>
<!-- count的值在切换的过程中，并没有得到保存 -->
count: {
{ count }}
</div>
</div>
</template>
<script>
export default {
name: 'DynamicA',
components: {
},
data() {
return {
count: 0
}
},
// 每次当组件被切换到时，此方法被调用了，说明当前组件实例又被重新创建了
created() {
console.log('DynamicA created');
},
// 每次当组件切换走时，此方法被调用了，说明当前组件实例已被销毁
destroyed() {
console.log('DynamicA destroyed');
}
}
</script>
<style>
.dynamicA {
border: 1px solid #dcdfe6;
width: 300px;
padding: 20px;
}
</style>
DynamicB.vue
<template>
<div class="dynamicB">
DynamicB
<el-input v-model="inputVal"></el-input>
</div>
</template>
<script>
export default {
name: 'DynamicB',
components: {
},
data() {
return {
inputVal:''
}
},
// 每次当组件被切换到时，此方法被调用了，说明当前组件实例又被重新创建了
created() {
console.log('DynamicA created');
},
// 每次当组件切换走时，此方法被调用了，说明当前组件实例已被销毁
destroyed() {
console.log('DynamicA destroyed');
}
}
</script>
<style>
.dynamicB {
border: 1px solid #dcdfe6;
width: 300px;
padding: 20px;
}
</style>
<KeepAlive>
<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。
在上面的例子中，当切换组件时，当前组件实例的数据并没有保存。但有的时候我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些动态组件包装起来。
Dynamic.vue
<template>
<div>
<el-button-group>
<el-button @click="componentName='DynamicA'">DynamicA</el-button>
<el-button @click="componentName='DynamicB'">DynamicB</el-button>
</el-button-group>
<!--
1. 被传给 :is 的值是被注册的组件名
2. <KeepAlive> 默认会缓存内部的所有组件实例，
但我们可以通过 include 和 exclude prop 来定制该行为。
这两个 prop 的值都可以是一个以英文逗号分隔的字符串、
一个正则表达式，或是包含这两种类型的一个数组
3. 使用keepAlive后，组件切换时，并不会销毁被切走的组件，
只是它处于不活跃状态，当再次切换到它时，它又变成了活跃状态。
在使用了KeepAlive后，可以给组件注册activated和deactiveted声明周期钩子函数
-->
<keep-alive :include="['DynamicA','DynamicB']">
<component :is="componentName"></component>
</keep-alive>
</div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
name: '',
components: {
DynamicA,
DynamicB,
},
data() {
return {
componentName: ''
}
},
}
</script>
<style>
</style>
DynamicA.vue
<template>
<div class="dynamicA">
DynamicA
<div>
<el-button @click="count+=1">count+1</el-button>
count: {
{ count }}
</div>
</div>
</template>
<script>
export default {
name: 'DynamicA',
components: {
},
data() {
return {
count: 0
}
},
// 只有第一次创建该组件时，才会调用，然后被缓存下来了。后面切换的过程，都不会调用此钩子
created() {
console.log('DynamicA created');
},
destroyed() {
console.log('DynamicA destroyed');
},
activated() {
// 在首次挂载、
// 以及每次从缓存中被重新插入的时候调用
console.log('DynamicA activated');
},
deactivated() {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
console.log('DynamicA deactivated');
}
}
</script>
<style>
.dynamicA {
border: 1px solid #dcdfe6;
width: 300px;
padding: 20px;
}
</style>
DynamicB.vue
<template>
<div class="dynamicB">
DynamicB
<el-input v-model="inputVal"></el-input>
</div>
</template>
<script>
export default {
name: 'DynamicB',
components: {
},
data() {
return {
inputVal:''
}
},
// 只有第一次创建该组件时，才会调用，然后被缓存下来了。后面切换的过程，都不会调用此钩子
created() {
console.log('DynamicB created');
},
destroyed() {
console.log('DynamicB destroyed');
},
activated() {
// 在首次挂载、
// 以及每次从缓存中被重新插入的时候调用
console.log('DynamicB activated');
},
deactivated() {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
console.log('DynamicB deactivated');
}
}
</script>
<style>
.dynamicB {
border: 1px solid #dcdfe6;
width: 300px;
padding: 20px;
}
</style>