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，deactivated
    activated() {
        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>