【VUE】父组件点击后子组件页面内容不更新 :key=“timer“

SZnA1

已于 2022-11-22 17:03:08 修改

阅读量4.1k

点赞数 2

分类专栏：疑难记录 VUE 文章标签： vue.js elementui 前端

于 2022-05-30 16:46:59 首次发布

本文链接：https://blog.csdn.net/liusuihong919520/article/details/125049469

版权

疑难记录同时被 2 个专栏收录

55 篇文章 3 订阅

订阅专栏

VUE

34 篇文章 1 订阅

订阅专栏

当父组件点击后子组件未响应数据更新时，可以尝试在父组件中给子组件添加key属性，并绑定一个时间戳。每次打开子组件时，更新时间戳以触发子组件的重新渲染。这种方法利用了Vue的key机制，当key值改变时，组件会重新创建，确保组件状态与最新数据同步。

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

：父组件点击后，子组件页面内容不更新（参数已经传递，子组件并没有对新参数进行调用）

解决方法：

在父组件页面中：

给引入的需要更新的子组件中添加：

    <business-form-dialog-template @submit="receiveOrder">
      <order-apply-form :key="timer"/> //添加key
    </business-form-dialog-template>

父组件的点击方法中添加：

    handleAddOrder() {
        this.timer = new Date().getTime();    //添加此方法即可
    }

父组件data中添加：

timer: ''

这样即可解决：在父组件中打开子组件显示，子组件进行页面的created、mounted后，隐藏子组件，再次使子组件显示时，子组件的数据并不会更新，只是简单的隐藏和显示。

原理是：

有时候我们需要这个组件每次都重新生成dom 元素，每次都执行created() 函数

这时候就用到了vue中的key 属性。
key属性和react 的key属性基本上一样
key 属性不是给开发人员用的，而是用来给vue 元素渲染的时候用的，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。
根据这个原理我们可以给key 直接绑定一个时间戳