Vue3中provide/inject传递Axios数据，子组件无法接收怎么办？

问题1：命名不匹配 #

你父组件provide中对外暴露的变量名是myData，但子组件inject时声明的是itemsList，两者名称不一致，这是子组件拿不到数据的直接原因。先把名称统一：

父组件修改provide：

provide(){
  return{
    itemsList : this.itemsList, // 把myData改成itemsList，和子组件inject的名称对应
  }
},

问题2：响应式丢失 #

即使名称统一，异步请求完成后子组件依然无法更新数据。这是因为provide默认不会追踪数据的响应式变化——你初始provide的是空数组的引用，当axios请求回来后，this.itemsList被赋值为新的数组对象，但provide对外提供的还是原来的空数组引用，子组件感知不到这个变化。

解决方法有两种：

方法一：使用computed包装（选项式API适配）

在父组件中用computed包裹要提供的数据，让provide返回一个响应式的计算属性：

import { computed } from 'vue'

export default {
    mounted() {
        axios.get("http://localhost:3030/list").then(item_response => this.itemsList = item_response.data);
    },
    data() {
        return {
            itemsList: []
        };
    },
    provide(){
      return{
        itemsList : computed(() => this.itemsList), // 用computed包装
      }
    },
}

子组件无需修改，模板中可以直接使用itemsList，计算属性会自动追踪this.itemsList的变化并更新。

方法二：使用ref（组合式API推荐）

改用Vue3的组合式API，用ref定义响应式数据，再通过provide传递：
父组件：

import { ref, provide } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const itemsList = ref([])
    
    // 异步请求获取数据
    axios.get("http://localhost:3030/list").then(item_response => {
      itemsList.value = item_response.data
    })
    
    // 提供响应式数据
    provide('itemsList', itemsList)
    
    return { itemsList }
  }
}

子组件：

<template>
<small v-if="itemsList.length > 0"
      class=" text-red d-flex justify-content-end align-items-center mt-2">Length of the List: {{itemsList.length}}</small>
</template>
<script>
import { inject } from 'vue'
export default{
  setup() {
    const itemsList = inject('itemsList')
    return { itemsList }
  }
}
</script> 

总结 #

先修正provide和inject的变量名匹配问题，再通过computed或ref确保数据的响应式传递，子组件就能正确获取并更新数据了。

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