vue-动态组件、keep-alive

本文介绍: 接下来我们就看看动态组件如何创建，废话不多少直接上代码（代码中有备注）如果我们想写一个 tabbar 导航栏，我能想到的两种方式。

vue–动态 组件、keep–a live

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

&lt;template&gt;
  <div class="container"&gt;
    <!-- keep-alive缓存组件  --&gt;
	<!-- include：指定缓存组件名，缓存多个用逗号分隔开 --&gt;
	<!-- exclude：指定不缓存组件名 ，缓存多个用逗号分隔开--&gt;
    <keep-alive  include="First,Last"&gt;
      <!-- 通过切换show值切换组件--&gt;
      <!-- is绑定组件名--&gt;
      <component :is="show"&gt;</component&gt;
    </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>