vue3单独重新渲染子组件

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值的方法，延时函数还是需要时间的