在写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++;
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐