vue刷新子组件、重置组件以及重新加载子组件项目实战记录
更新时间：2023年12月07日 09:29:19 作者：Jocelyn_书
在vue开发中出于各种目的,我们常常需要让组件重新加载渲染,这篇文章主要给大家介绍了关于vue刷新子组件、重置组件以及重新加载子组件的相关资料,需要的朋友可以参考下
项目场景：
在父组件循环数据列表中，列表中有事件点击打开某个子组件；
父组件中要更新子组件的值
问题描述
在父组件循环数据列表中，点击打开某个子组件，A数据打开子组件后，B数据再打开子组件，此时子组件中会有缓存A数据。
原因分析：
子组件没有刷新，还是停留在上一个数据缓存
解决方案：
给组件添加key值
原理：key值变化之后，会自动重新渲染组件
vue中的key的作用主要是为了高效的更新dom, 它也可以用于强制替换元素/组件而不是重复使用它，完成的触发组件的生命周期钩子，触发过渡。
<template>
<el-button @click="btnEvent">刷新子组件</el-button>
<child :key="datekey"></child>
</template>
<script>
export default{
data(){
return {
datekey:Date.now()
}
},
methods:{
btnEvent(){
//这里更新了datekey ，组件就会刷新
this.datekey = Date.now()
}
}
}
</script>总结
到此这篇关于vue刷新子组件、重置组件以及重新加载子组件的文章就介绍到这了,更多相关vue刷新子组件重置组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了浅谈Vue页面级缓存解决方案feb-alive(下),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
elementUI el-input 只能输入正整数验证的操作方法
这篇文章主要介绍了elementUI el-input 只能输入正整数验证,本文给大家详细讲解对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
Three.js是一个轻量级的WebGL封装库,用于在浏览器中渲染复杂的3D图形,它提供了便捷的API,可以快速构建3D场景、对象和动画,Vue.js是一个渐进式JavaScript框架,擅长构建用户界面,本文给大家介绍了在Vue3项目中安装和配置Three.js的操作,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了Vue分页查询怎么实现，使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页2023-04-04
这篇文章主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)
在实际应用中可能用户希望将系统中一个页面展示的所有数据报表,用PDF的文件格式下载下来,以便于其他用途,这篇文章主要给大家介绍了关于vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)的相关资料,需要的朋友可以参考下2024-06-06
本文主要介绍了Vue预览图片和视频的几种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家详细介绍了vue3如何通过elementPlus实现一个简单的年份选择器,文中的示例代码讲解详细,需要的小伙伴可以跟随小编一起学习一下2024-01-01
本篇文章主要介绍了Vue2.0表单校验组件vee-validate的使用详解，详细的介绍了vee-validate使用教程。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论