在写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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐