vue3单独重新渲染子组件
我们经常在处理表单时,一般用弹窗类表单,不会存在此类问题,因为弹窗的打开关闭已经实现重新渲染弹窗组件。
但是如果表单和列表在同一页面,你希望在表单编辑完成保存后,单独刷新页面的下半部分详情组件,这时需要主动使子组件重新渲染,以便拿到更新后的值。
代码实现
<template>
<div>
<!-- 子组件,通过 key 属性控制重新渲染 -->
<ChildComponent :key="refreshKey" />
<!-- 一些按钮或其他交互,用于触发重新渲染 -->
<button @click="refreshChildComponent">刷新子组件</button>
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
setup() {
const refreshKey = ref(0);
// 点击按钮时更新 key,触发子组件重新渲染
const refreshChildComponent = () => {
refreshKey.value += 1;
};
return {
refreshKey,
refreshChildComponent,
};
},
};
</script>
好处
如果不主动刷新子组件的话,子组件一般有很多改变状态的flag,每次保存需要手动把所有flag重置,会很麻烦。
其他方法
也可以通过主动设置一个flag绑定在子组件的v-if上,在需要刷新子组件的函数中,先将flag设置为false,然后加一个延时函数,零点几秒后将flag变回true,也可以实现子组件的重新加载(用nextTick也可以实现,原理一样)
<template>
<div>
<ChildComponent v-if="flag" />
</div>
</template>
const flag = ref<boolean>(true)
const updateChild = () => {
flag.value = false
setTimeout(() => {
flag.value = true
}, 500)
}
推荐使用改变key值的方法,延时函数还是需要时间的