项目开发之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>
原文链接:https://devpress.csdn.net/viewdesign/6412da6e986c660f3cf92b19.html?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-129144580-blog-113709984.235%5Ev27%5Epc_relevant_t0_download&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-129144580-blog-113709984.235%5Ev27%5Epc_relevant_t0_download&utm_relevant_index=2
更多推荐
已为社区贡献2条内容
所有评论(0)