vue3子组件数据无法更新问题

 更新时间:2023年10月07日 10:50:47   作者:嘉然今天刷算法  
这篇文章主要介绍了vue3子组件数据无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3子组件数据无法更新

在写vue3代码时,遇到了父组件传值给子组件,但是子组件无法及时刷新数据,父组件数据是异步获取的。

使用了很多方法,froceUpdate(),nextTick之类的方法都试过了没有生效。

所以需要在父组件对子组件进行刷新。

解决思路

利用vue diff算法的特点,更新key,强制使子组件刷新

代码:

//dom
//给需要刷新的子组件加上一个自定义的key
<v-number :num="memoryNum" :fontSize="28" class="number" :key="keyNum"></v-number>
//ts
//所有数据加载完毕之后,更改这个key即可
let keyNum = ref(0);
onMounted(async () => {
 await init();
 keyNum.value++;
});

vue3子组件数据无法更新

问题描述 

子组件接收到父组件传递的prop数据后,在created 中进行一番预处理,再赋值给模板,而当在父组件中改变prop数据,子组件的视图未发生改变。

原因

子组件并没有重新加载,所以不会再次执行created或者mounted,子组件也就未处理改变的prop数据,视图也就不会更新。

解决办法

子组件上加上唯一的key,传入的props不同时,key值也不同,这样当切换prop数据的时候,由于key不同,vue会认为是两个不同的组件,就会重新执行组件的created或者mounted中的操作。

<Child :data="data" :key="data.id"></Child> 

在子组件使用 watch 监听(可能需要深度监听)props传过来的值,如果发现改变,再次执行created或者mounted中的操作。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuex state及mapState的基础用法详解

    vuex state及mapState的基础用法详解

    这篇文章主要介绍了vuex state及mapState的基础用法详解,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友跟随脚本之家小编一起学习吧
    2018-04-04
  • vue-cli项目修改文件热重载失效的解决方法

    vue-cli项目修改文件热重载失效的解决方法

    今天小编就为大家分享一篇vue-cli项目修改文件热重载失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中使用Echarts仪表盘展示实时数据的实现

    Vue中使用Echarts仪表盘展示实时数据的实现

    这篇文章主要介绍了Vue中使用Echarts仪表盘展示实时数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 一文详解Vue响应式数据的原理

    一文详解Vue响应式数据的原理

    在vue2的响应式中,存在着添加属性、删除属性、以及通过下标修改数组,但页面不会自动更新的问题,而这些问题在vue3中都得以解决,本文就给大家详细的介绍一下Vue响应式数据原理,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • 浅谈Vue的双向绑定和单向数据流冲突吗

    浅谈Vue的双向绑定和单向数据流冲突吗

    单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗?本文就详细的介绍一下
    2022-04-04
  • vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    父子组件通信,都是单项的,很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下
    2017-11-11
  • 关于Vue中过滤器的必懂小知识

    关于Vue中过滤器的必懂小知识

    vue过滤器可以在不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,下面这篇文章主要给大家介绍了关于Vue中过滤器必懂小知识的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue 移动端注入骨架屏的配置方法

    vue 移动端注入骨架屏的配置方法

    骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
    2019-06-06
  • 使用webpack手动搭建vue项目的步骤

    使用webpack手动搭建vue项目的步骤

    这篇文章主要介绍了从零使用webpack手动搭建vue项目的步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论