vue.js - 将数据传递给组件并在该组件数据函数中使用它

Question

我正在将数据传递给组件，并且能够从props. 但我也想将此数据传递给组件数据函数。

这是父代码：

<template>
    <div>
        <post v-for="(post, key) in posts" :key="key" :post="post" />
    </div>
</template>

<script>
import post from './components/post';

export default{
    components: {
        post
    },
    data(){
        return{
            posts: [{/*Posts*/}]
        }
    }
}
</script>

组件代码：

<template>
    <div :post="post">
        <span>{{ post.title }}</span>
    </div>
</template>

<script>
export default{
    props: ['post'],
}
</script>

我试图添加：

data(){
    return{
        status: post.status
    }
}

之后的组件props。但我有一个错误post not defined in data

我试图搜索它，但没有找到解决方案

标签： vue.jsvue-component

Answer 1

在子组件中：

<template>
  <!-- <div :post="post"> you don't send post here, you receive it thru props-->
  <div>
    <span>{{ post.title }}</span>
  </div>
</template>

然后在数据使用道具中：

data(){
  return{
    status: this.post.status
  }
}