如何将Nuxt页面中Axios获取的posts传递给组件并循环渲染？

架构老林

2026-5-6

没问题，这其实就是Vue组件间传值的基础场景，核心就是用props来实现，我一步步给你讲怎么改：

第一步：在父组件（index.vue）中传递数据给List组件

你需要在<list>标签上通过v-bind（可简写为:）把获取到的posts数据绑定过去，这样子组件就能拿到这个数据了。修改后的index.vue代码如下：

<template>
  <div>
    <navbar />
    <logo />
    <ul>
      <!-- 绑定posts数据到子组件 -->
      <list :posts="posts" />
    </ul>
  </div>
</template>

<script>
import Navbar from '~/components/Navbar.vue'
import Logo from '~/components/Logo.vue'
import List from '~/components/List.vue'

export default {
  components: { Navbar, Logo, List },
  async asyncData ({ $axios }) {
    const posts = await $axios.$get('https://www.myapi.com/posts')
    return { posts }
  }
}
</script>

<style>
</style>

第二步：在子组件（List.vue）中定义props接收数据

没错，你确实需要在这里定义props！这是Vue规定的子组件接收父组件数据的标准方式，还可以通过指定类型、默认值来增强组件的健壮性。修改后的List.vue代码如下：

<template>
  <!-- 给v-for添加唯一key，这是Vue列表渲染的最佳实践 -->
  <li v-for="post in posts" :key="post.id">
    {{ post.type }} - {{ post.title }}
  </li>
</template>

<script>
export default {
  props: {
    posts: {
      // 指定数据类型为数组
      type: Array,
      // 设置默认空数组，避免数据未加载时出现报错
      default: () => []
    }
  }
}
</script>