Vue3如何在selectedLeague变量变更时重新加载组件？

以下是几种可靠的解决方案，针对你尝试过的方法未生效的情况逐一排查：

方案1：通过key属性强制组件重新渲染 #

Vue会复用相同类型的组件优化性能，因此即使props变化，组件也不会重新执行created钩子。给组件添加唯一的key，当selectedLeague变化时，key同步更新，Vue会销毁旧组件并创建新实例，自然触发API请求逻辑。

修改父组件代码：

<div v-if="selectedLeague">
  <LeagueTopScorers 
    :is="selectedLeague" 
    :selectedLeague="selectedLeague.id.toString()"
    :key="selectedLeague.id.toString()"
  />
</div>

方案2：在子组件中正确监听props变化 #

如果之前的watch写法有误（比如未设置immediate或监听逻辑存在问题），调整子组件的监听逻辑：

// LeagueTopScorers组件代码
export default {
  props: {
    selectedLeague: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      topScorers: []
    };
  },
  methods: {
    async fetchTopScorers() {
      // 替换为你的实际API请求逻辑
      const res = await fetch(`/api/top-scorers/${this.selectedLeague}`);
      this.topScorers = await res.json();
    }
  },
  watch: {
    selectedLeague: {
      // 组件初始化时立即执行一次请求
      immediate: true,
      handler(newLeagueId) {
        // 确保有有效值再发起请求
        if (newLeagueId) {
          this.fetchTopScorers();
        }
      }
    }
  }
};

方案3：检查API请求参数是否正确 #

确认传递给API的selectedLeague值是否准确：比如selectedLeague是否确实存在id属性，toString()转换是否必要。如果API要求数字类型参数，直接传递selectedLeague.id即可，避免参数类型不匹配导致请求无变化。

内容的提问来源于stack exchange，提问作者Remik00