首页 前端知识 项目开发之vue中如何刷新子组件,重置组件,重新加载子组件

项目开发之vue中如何刷新子组件,重置组件,重新加载子组件

2024-01-29 13:01:08 前端知识 前端哥 562 737 我要收藏

项目场景:

在父组件循环数据列表中,列表中有事件点击打开某个子组件;

父组件中要更新子组件的值


问题描述

在父组件循环数据列表中,点击打开某个子组件,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://www.qianduange.cn//article/692.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!