vue-动态组件、keep-alive

最新推荐文章于 2024-01-24 23:57:25 发布

builder2991

最新推荐文章于 2024-01-24 23:57:25 发布

阅读量619

点赞数 8

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/low666/article/details/134693192

版权

vue 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

本文介绍了在Vue中使用动态组件和keep-alive特性创建tabbar导航栏的方法，通过`keep-alive`缓存组件以提高性能，同时展示了组件的`activated`和`deactivated`生命周期钩子在切换过程中的作用。

摘要由CSDN通过智能技术生成

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>