vue子组件请求数据

在 Vue 子组件中请求数据通常可以使用以下几种方法：

1. 在子组件的 `created` 或 `mounted` 生命周期钩子中使用 `axios` 或 `fetch` 等网络请求库发送请求获取数据。

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    axios.get('/api/items').then(response => {
      this.items = response.data;
    }).catch(error => {
      console.error(error);
    });
  }
}
</script>

2. 在父组件中使用 `props` 把数据传递给子组件，然后在子组件中使用 `watch` 监听 `props` 的变化，一旦发生变化就重新渲染子组件。

// 父组件
<template>
  <div>
    <child-component :items="items"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    axios.get('/api/items').then(response => {
      this.items = response.data;
    }).catch(error => {
      console.error(error);
    });
  }
}
</script>

// 子组件
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    items() {
      this.$forceUpdate();
    }
  }
}
</script>

3. 在父组件中使用 `provide` 和子组件中使用 `inject` 共享数据，这种方法需要注意父子组件之间的耦合性。

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  provide() {
    return {
      items: this.items
    };
  },
  data() {
    return {
      items: []
    };
  },
  created() {
    axios.get('/api/items').then(response => {
      this.items = response.data;
    }).catch(error => {
      console.error(error);
    });
  }
}
</script>

// 子组件
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['items']
}
</script>