Vue3组合式API中provide/inject无法正常生效问题求助

1. 层级关系排查（硬编码传值失效的核心原因） #

provide/inject 仅支持祖先组件向后代组件传值，不满足层级关系时必然无法拿到值：

• 确认调用provide的组件，是调用inject组件的父/祖父等上层祖先组件
• 确认调用inject的子组件已被正常挂载渲染：若子组件未被父组件模板引用、未实例化，setup函数不会执行，自然不会产生console输出
• 确认两个组件归属同一个Vue应用实例，多实例下provide内容是跨实例隔离的

2. 响应式逻辑修复 #

你现有代码的响应式定义存在明显错误，是动态请求数据无法同步的核心原因：

reactive 仅对对象/数组类型生效，传入null、基础类型、undefined时会直接返回原值，不会生成响应式代理。如果你的weatherData初始值为null，const returnedWeatherData = reactive(weatherData)执行后returnedWeatherData本身就是null，这就是inject拿到的值始终为null的直接原因。

父组件修复代码 #

setup () {
  // 改用ref定义，支持所有类型的响应式存储
  const weatherData = ref(null)
  const userInput = ref('')

  async function getCurrentWeather () {
    const response = await fetch(`${baseWeatherApiUrl}q=${userInput.value}`);
    userInput.value = null;
    // 直接修改ref的value属性即可自动触发响应式更新
    weatherData.value = await response.json();
  }

  // 直接provide ref实例即可，不需要额外包裹reactive
  provide('returnedWeatherData', weatherData);
  // 硬编码测试也可以直接写死ref传值
  // provide('geolocation', ref({ longitude: 90, latitude: 135 }))

  return {
    getCurrentWeather,
    userInput,
    weatherData
  }
}

子组件使用方式 #

setup () {
  const weatherData = inject('returnedWeatherData');
  const userGeolocation = inject('geolocation');
  // js环境下访问值需要取.value，模板中会自动解包不需要加
  console.log(weatherData?.value, userGeolocation?.value)
  
  return {
    weatherData,
    userGeolocation
  }
}

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