Nuxt中Post组件渲染提示属性未定义，如何实现博客卡片？

1. 在Post组件中声明接收的Props #

根据你使用的Vue版本（Nuxt 2对应Vue 2，Nuxt 3对应Vue 3），选择对应的写法：

选项式API（Nuxt 2 / Vue 2）

<template>
  <div class="post-card">
    <h3>{{ title }}</h3>
    <p class="post-date">{{ date }}</p>
    <p class="post-text">{{ text }}</p>
  </div>
</template>

<script>
export default {
  // 明确声明组件需要接收的属性
  props: {
    title: {
      type: String,
      required: true // 设置为必填，确保父组件传值
    },
    date: {
      type: String,
      required: true
    },
    text: {
      type: String,
      required: true
    }
  }
}
</script>

组合式API（Nuxt 3 / Vue 3）

<template>
  <div class="post-card">
    <h3>{{ title }}</h3>
    <p class="post-date">{{ date }}</p>
    <p class="post-text">{{ text }}</p>
  </div>
</template>

<script setup>
// 使用defineProps定义组件接收的属性
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  date: {
    type: String,
    required: true
  },
  text: {
    type: String,
    required: true
  }
})
</script>

2. 在父页面/组件中传递属性 #

以Nuxt页面为例，在pages/index.vue中引入并使用Post组件：

<template>
  <div class="posts-wrapper">
    <!-- 直接传递字符串属性 -->
    <Post 
      title="我的第一篇博客"
      date="2024-05-20"
      text="这是博客的内容摘要，用来展示文章核心信息..."
    />
    
    <!-- 如果是从数据变量中取值，用v-bind语法 -->
    <Post 
      :title="secondPost.title"
      :date="secondPost.date"
      :text="secondPost.text"
    />
  </div>
</template>

<script>
// Nuxt 2中需要注册组件
import Post from '@/components/Post.vue'

export default {
  components: {
    Post
  },
  data() {
    return {
      secondPost: {
        title: "Vue组件入门指南",
        date: "2024-05-21",
        text: "记录Vue组件的基本使用方法和注意事项..."
      }
    }
  }
}
</script>

<!-- Nuxt 3中用<script setup>无需手动注册组件 -->
<script setup>
import Post from '@/components/Post.vue'

const secondPost = {
  title: "Vue组件入门指南",
  date: "2024-05-21",
  text: "记录Vue组件的基本使用方法和注意事项..."
}
</script>

核心说明 #

• 你之前的警告是因为组件没有声明接收title/date/text这些属性，Vue会默认把这些属性当成组件实例的data，但你没定义对应的data字段，所以报错。
• 必须在组件中通过props（选项式）或defineProps（组合式）声明要接收的属性，才能在模板中正常使用。
• 父组件使用组件时，要通过属性传递对应的值，静态字符串直接写属性名="值"，动态变量用:属性名="变量"。

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