Vue中如何通过slot获取API数据？Axios调用位置及slot写法疑问

一、需要掌握的核心术语和知识点 #

• 作用域插槽机制：你当前使用的是作用域插槽，核心能力是父组件可以接收子组件（通常是表格类组件）暴露的内部数据做自定义渲染，代码里的row就是子组件暴露的单行数据对象
• 响应式状态：你需要先在Vue实例中声明响应式的数组变量，用来存储接口返回的列表数据，变量更新后绑定该变量的组件会自动刷新渲染
• Vue生命周期钩子：created（Vue2）、mounted（Vue2/Vue3）是触发初始接口请求的常用时机，和React中componentDidMount、useEffect的作用类似
• 注意：插槽本身不负责请求API数据，只负责自定义渲染子组件传入的数据，你只需要把接口返回的列表数据绑定到表格类组件的数据源属性上，原有插槽逻辑不需要修改就能自动渲染新数据

二、Axios请求方法的定义位置 #

Axios在Vue中的用法和你在React中使用的逻辑完全一致，只是放置方法的位置有区别：

Vue2 选项式API写法 #

import axios from 'axios'
export default {
  data() {
    return {
      tableData: [] // 存储接口返回的列表数据
    }
  },
  methods: {
    // 定义请求方法
    async fetchTableData() {
      try {
        const res = await axios.get('你的API接口地址')
        // 赋值给响应式变量，自动触发视图更新
        this.tableData = res.data
      } catch (err) {
        console.error('数据请求失败：', err)
      }
    }
  },
  // 页面初始化时调用请求
  created() {
    this.fetchTableData()
  }
}

之后将tableData绑定到你的表格组件的数据源属性即可，比如Element UI的表格组件是:data="tableData"。

Vue3 组合式API写法 #

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

export default {
  setup() {
    const tableData = ref([])
    // 定义请求方法
    const fetchTableData = async () => {
      try {
        const res = await axios.get('你的API接口地址')
        tableData.value = res.data
      } catch (err) {
        console.error('数据请求失败：', err)
      }
    }
    // 组件挂载后调用请求
    onMounted(() => {
      fetchTableData()
    })
    return { tableData }
  }
}

三、是否需要替换现有slot语法 #

• 如果你使用的是Vue 2.6以下版本：不需要修改，原有slot+slot-scope的写法可以正常运行
• 如果你使用的是Vue 2.6及以上版本、或者Vue3：官方推荐替换为v-slot语法，旧语法在Vue3中已经被废弃，替换后的写法如下：

<!-- 完整写法 -->
<template v-slot:name="row">
  {{row.value.first}} {{row.value.last}}
</template>
<!-- 简写写法 -->
<template #name="row">
  {{row.value.first}} {{row.value.last}}
</template>

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