vue子组件请求数据

在 Vue 中，子组件请求数据的一种常见方式是使用父组件传递给子组件的 props，然后在子组件中通过 props 来获取数据。这种方式适用于父组件已经获取到数据并将其传递给子组件的情况。

如果子组件需要自己请求数据，可以使用 Vue 的生命周期钩子函数中的 created 或 mounted 来发送异步请求。具体实现步骤如下：

1. 在子组件中定义一个 data 属性用来存储请求到的数据。

2. 在子组件的 created 或 mounted 生命周期钩子函数中发送异步请求，一般使用 axios 或者 fetch API 发送请求。

3. 在请求成功的回调函数中，将获取到的数据保存到 data 属性中。

4. 在子组件的模板中使用 data 属性中的数据渲染页面。

示例代码如下：

<!-- 父组件模板 -->
<template>
  <div>
    <child :data="list"></child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // 父组件请求数据
    axios.get('/api/list').then(res => {
      this.list = res.data
    })
  }
}
</script>

<!-- 子组件模板 -->
<template>
  <ul>
    <li v-for="item in data" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    // 子组件请求数据
    axios.get('/api/list').then(res => {
      this.list = res.data
    })
  }
}
</script>