vue-动态组件、keep-alive

vue-动态组件、keep-alive

如果我们想写一个tabbar导航栏，我能想到的两种方式

• 通过if条件判断的方式实现（不赘述）
• 动态组件

接下来我们就看看动态组件如何创建，废话不多少直接上代码（代码中有备注）

首先创建一个调用组件的文件：

<template><div class="container"><!-- keep-alive缓存组件  --><!-- include：指定缓存组件名，缓存多个用逗号分隔开 --><!-- exclude：指定不缓存组件名 ，缓存多个用逗号分隔开--><keep-alive  include="First,Last"><!-- 通过切换show值切换组件--><!-- is绑定组件名--><component :is="show"></component></keep-alive><!-- 点击触发方法切换show的值--><button @click="change()">切换</button></div>
</template><script>
//导入组件
import First from './First.vue';
import Last from './Last.vue';export default {components: {First, Last},data() {return {show: 'First'}},methods: {//切换的函数change() {if(this.show == 'First'){this.show = 'Last';}else{this.show = 'First';}}}
}
</script>

接下来是两个组件
组件1：

<template><div><!-- 设置num增加是为了测试组件是否缓存--><!-- 如果没有缓存，数值变化再切换会变回原始的数值 --><h3>First: {{ num }}</h3><button @click="add()">增加</button></div>
</template><script>
export default {data() {return {num: 0}},methods: {add() {this.num += 1;}},//组件会触发的生命周期：activated，deactivatedactivated() {console.log('创建')},deactivated() {console.log('销毁')}
}
</script>

组件2：

<template><div><h3>Last: {{ num }}</h3><button @click="add()">增加</button></div>
</template><script>
export default {data() {return {num: 0}},methods: {add() {this.num += 1;}},activated() {console.log('创建')},deactivated() {console.log('销毁')}
}
</script>