Nuxt 问题属性在渲染期间被访问，但未在实例上定义

Question

我尝试用博客文章制作卡片。我制作了一个组件 Post 并将其插入代码中。但效果如图所示。并表明了这一点。如何在卡片中插入文字？现在所有文本都在属性中。我刚刚开始学习 vue 和 nuxt，所有的例子都不适合。

[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.

<template>
    <div class="post"><div><b>{{ title }}</b></div><div><small><i>{{ date }}</i></small></div><div>{{ text }}</div></div>
</template>

export default Vue.component('Post', {
    props: {
        id: number,
        date: Date,
        title: string,
        text: string
    }
});

<script setup lang="ts">
import Post from '~/components/Post.vue';

let posts = [
        {
            id: 1,
            date: new Date(),
            title: 'Title1',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 2,
            date: new Date(),
            title: 'Title2',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 3,
            date: new Date(),
            title: 'Title3',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 4,
            date: new Date(),
            title: 'Title4',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
        {
            id: 5,
            date: new Date(),
            title: 'Title5',
            text: 'Asdns fdj d k hje jfaj fg fhbvjshefbvjv djfkenkn f  fj fdnkveklnelncln  jvjnjerejknkj'
        },
    ]

</script>

<template>
<div class="posts">
    
</div>
<Post  
        v-for="post in posts"
        :key="post.id"
        :title="post.title"
        :date="post.date"
        :text="post.text"
    ></Post>
</template>

我在组件中尝试了不同形式的脚本，但没有任何效果。

Answer 1

在 Vue3/Nuxt3 中声明组件的正确语法之一是使用

defineComponent

帮助器：

<template>
    <div class="post"><div><b>{{ title }}</b></div><div><small><i>{{ date }}</i></small></div><div>{{ text }}</div></div>
</template>
<script lang="ts">
import {defineComponent} from "vue"

export default defineComponent({
     props: {
        id: number,
        date: Date,
        title: string,
        text: string
    }
})

</script>