vue3组件刷新，手动刷新组件，手动重新加载组件，类似reload方法

一般情况会封装一个refreshData来重新刷新数据，但是有些情况参数比较复杂，写这种刷新方法需要注意很多东西还要注意时机问题，所以可以在某些情况下直接去刷新组件来刷新数据。

如何是调用组件内部的方法这样调用就行了

const projectTeamMembersRef = ref(null)
const getTrainingSubProgramList = async (_trainingProgramId: any) => {
    state.pageParam.trainingProgramId = _trainingProgramId
    // 改变key刷新组件
    // state.reloadKey = state.reloadKey + 1
    // 调用组件内部的方法
    if (projectTeamMembersRef && projectTeamMembersRef.value) {
         projectTeamMembersRef.value.refreshData()
    }
}

方法一：使用 key 强制重新渲染

通过改变组件的 key 属性，Vue 会认为这是一个全新的组件实例，从而强制重新渲染。

<template>
  <ProjectTeamMembers
    ref="projectTeamMembersRef"
    v-if="state.pageParam.trainingProgramId"
    :key="reloadKey"
    :programType="1"
    :programID="state.pageParam.trainingProgramId"
  ></ProjectTeamMembers>
  <button @click="reloadComponent">Reload Component</button>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const state = ref({
      pageParam: {
        trainingProgramId: 123, // 示例数据
      },
    });
    const projectTeamMembersRef = ref(null);
    const reloadKey = ref(0); // 初始化 key
    const reloadComponent = () => {
      reloadKey.value += 1; // 改变 key 值以强制重新渲染组件
    };
    return {
      state,
      projectTeamMembersRef,
      reloadKey,
      reloadComponent,
    };
  },
};
</script>

在这个例子中，每次点击按钮时，reloadKey 的值都会增加，从而导致 ProjectTeamMembers 组件被重新渲染。