如何在Vue插槽中访问ApiLoader组件的API响应数据？

你的问题本质是子组件内部数据无法被父组件的插槽内容访问，Vue的作用域插槽是最直接的解决方案——它允许子组件将内部数据绑定到插槽上，父组件在使用插槽时可以直接接收并使用这些数据，比emit实现更简洁高效。

1. 修改ApiLoader组件，暴露内部数据到插槽 #

在ApiLoader的模板中，通过v-bind将存储API返回数据的变量绑定到插槽上，让父组件能访问到：

<template>
  <div class="api-loader">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>
    
    <!-- 错误提示 -->
    <div v-else-if="error" class="error">{{ error.message }}</div>
    
    <!-- 作用域插槽：绑定内部apiData给父组件 -->
    <slot v-else :data="apiData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: null,
      apiData: null // 存储API返回的核心数据
    };
  },
  methods: {
    async fetchApiData() {
      this.loading = true;
      this.error = null;
      try {
        // 替换为你的实际API请求逻辑
        const res = await fetch("your-api-url");
        this.apiData = await res.json();
      } catch (err) {
        this.error = err;
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.fetchApiData();
  }
};
</script>

2. 父组件中接收并使用插槽数据 #

父组件通过v-slot（或简写#）接收子组件传递的数据，直接在插槽内容中使用：

<template>
  <ApiLoader>
    <!-- 用解构语法直接获取子组件传递的data -->
    <template #default="{ data }">
      <!-- 这里可以直接使用ApiLoader返回的API数据 -->
      <h2>用户信息</h2>
      <p>姓名：{{ data.name }}</p>
      <p>手机号：{{ data.phone }}</p>
      <p>地址：{{ data.address }}</p>
    </template>
  </ApiLoader>
</template>

<script>
import ApiLoader from "@/components/ApiLoader.vue";

export default {
  components: { ApiLoader }
};
</script>

关键说明 #

• 作用域插槽的核心是子组件绑定数据，父组件接收数据，完全契合你“在插槽中使用API返回数据”的需求；
• 如果你需要传递多个数据（比如分页信息、额外状态），可以在slot标签上绑定多个属性，比如:data="apiData" :page="currentPage"，父组件解构时对应接收即可；
• 这种方式无需手动触发emit事件，代码更简洁，逻辑更清晰，是Vue官方推荐的插槽数据传递方案。

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