vue3组件请求接口数据

1. 安装axios和vue-property-decorator

npm i axios vue-property-decorator

2. 创建一个组件，比如MyComponent.vue

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

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";

@Component({})
export default class MyComponent extends Vue {
  items: any[] = [];

  created() {
    this.fetchData(); // 获取数据
  }

  async fetchData() {
    const res = await axios.get("http://example.com/api/items"); // 发送请求
    this.items = res.data; // 更新数据
  }
}
</script>

3. 在需要使用MyComponent的页面中导入组件

<template>
  <div>
    <h1>My App</h1>
    <my-component></my-component>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyComponent from "@/components/MyComponent.vue"; // 导入组件

@Component({
  components: {
    MyComponent, // 注册组件
  },
})
export default class App extends Vue {}
</script>

4. 执行npm run serve运行项目，即可看到数据渲染在页面上。