Vue使用provide/inject传递延迟加载数据时获取空值的解决方案

问题根源 #

你的代码里，provide('message', message.value)传递的是message这个ref的当前原始值（初始为空数组，之后是赋值的初始数组），而非ref对象本身。当setTimeout里更新message.value时，孙组件拿到的是之前的数组引用，无法感知后续数据变化，所以显示为空或旧数据。

修复方案 #

方案1：直接provide ref对象（推荐） #

修改父组件的provide逻辑，传递ref对象而非它的value：

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import FancyButton from './FancyButton.vue'

const message = ref<any[]>([])

onMounted(() => {
  setTimeout(() => {
    message.value = [
      {id: 1, name: "ddl"},
      {id: 2, name: "Omen ser"},
      {id: 3, name: "natural sea"},
      {id: 4, name: "Whale is swiming"},
      {id: 5, name: "Best food in"},
      {id: 6, name: "Better choice"},
      {id: 7, name: "What is next?"},
      {id: 8, name: "Other Option"},
    ]
  }, 2000)
})

// 传递ref对象，而非message.value
provide('message', message)
</script>

孙组件AnotherViewChild中inject后，通过.value访问响应式数据：

<script setup lang="ts">
import { inject, Ref } from 'vue'

const message = inject<Ref<any[]>>('message')
</script>

<template>
  <div v-for="item in message?.value" :key="item.id">
    {{ item.name }}
  </div>
</template>

方案2：用computed包装后provide #

如果不想让孙组件处理.value，可以用computed包装后provide：

<script setup lang="ts">
import { ref, provide, computed, onMounted } from 'vue'
import FancyButton from './FancyButton.vue'

const message = ref<any[]>([])

onMounted(() => {
  setTimeout(() => {
    message.value = [
      {id: 1, name: "ddl"},
      {id: 2, name: "Omen ser"},
      {id: 3, name: "natural sea"},
      {id: 4, name: "Whale is swiming"},
      {id: 5, name: "Best food in"},
      {id: 6, name: "Better choice"},
      {id: 7, name: "What is next?"},
      {id: 8, name: "Other Option"},
    ]
  }, 2000)
})

// 用computed包装，孙组件可直接使用
provide('message', computed(() => message.value))
</script>

孙组件中直接使用：

<script setup lang="ts">
import { inject } from 'vue'

const message = inject<any[]>('message')
</script>

<template>
  <div v-for="item in message" :key="item.id">
    {{ item.name }}
  </div>
</template>

核心注意事项 #

• provide必须传递响应式对象（ref、reactive、computed），而非原始值，这样后续数据更新才能被inject的组件感知。
• 若传递ref，子组件需通过.value访问；若传递computed或reactive，可直接使用。

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