将数据对象从Vue传递到组件以进行循环

Question

所以我有一些带有帖子的对象，并且我正在使用v-for在自定义组件中对其进行迭代，但是如何将数据从该对象传递到该组件中，循环是一回事，它显示数据...

<app-single-post v-for="post in posts" postData="$post"></app-single-post>

这是我的组件声明。我还需要某种特殊的道具设置吗？一次又一次地遇到相同的错误：

Property or method "postData" is not defined

Answer 1

使用绑定语法。

<app-single-post v-for="post in posts" :post="post" :key="post.id"></app-single-post>

驼峰式属性用作属性时，需要将其转换为kebab-case。另外，我添加了一个key。使用key时，应始终使用a ；v-for当您遍历自定义组件时，必须使用a。理想情况下，如果可能的post.id话，您将要使用一个。

在组件中，应该具有如下定义的属性：

export default {
    props:["post"],
    methods: {...},
    etc.
}

要引用组件模板中的帖子，可以使用

 {{post.id}}

和内部方法将是

this.post