Vue.js VueJS将计算数据作为道具传递，返回未定义的

我试了又试，但我想不出问题所在。从我在别处读到的内容来看，传递给子组件的变量在父组件中的数据可用之前被发送为

undefined

请参阅此处以供参考：

从“/components/Child”导入子项；
导出默认值{
名称：“应用程序”，
组成部分：{
小孩
},
计算：{
quote（）{return“迟做总比不做好”}
},
数据（）{
返回{
数据：{message:this.quote}，
thisWorks:{message:“如果替换传递给子项的内容，则可以看到此消息”}
};
}
};

然后在孩子身上：

<template>
  <div>
  <h1>I am the Child Component</h1>
  <h2> {{ parentData }}</h2>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {            
      parentData: { type: String, default: "I don't have parent data" },   
  },
};
</script>

我是孩子
{{parentData}}
导出默认值{
姓名：“儿童”，
道具：{
parentData:{type:String，默认值：“我没有父数据”}，
},
};

答案是，您无法访问

this.quote的值，因为在创建
数据对象时，
计算对象实际上不存在

这是另一种选择，我们将使用
created（）
生命周期挂钩来更新
数据对象的值：

  created(){
    this.data = {
      message: this.quote
    }
  },

您不需要更改任何内容，只需添加这些代码行就足够了

我已经在你的CodeSandbox项目中测试了这些代码，它工作起来很有魅力

希望能有帮助
 将
更改为
，因为html不使用大写字母，并且直接使用计算属性，如``谢谢尝试，但我不能直接传递引号，这是一个v-for循环的简化示例，该循环使用vuex中特定于所传递每个元素的数据。我复制了示例中的数据结构。如果您做得不对，我认为您不了解计算属性的作用，可以在计算属性中创建数据对象属性，但不能在计算属性之前创建reverseData属性。总是在你的问题中加入相关的代码，一把小提琴很好，但它不应该是你问题中的唯一参考。好的@devon point。你做错了，你可以让它工作，但它很混乱！我知道这很乱。然而，我想做的是解决作者的问题，尊重作者的代码。我可以在满足应用程序逻辑的同时重新编写它。stackoverflow这不仅仅是为了解决问题，而是让人们以良好的方式学习一些东西我同意你的观点！然后，@martinval的建议是，您应该直接将
quote
computed属性传递给
子组件，如下所示：
。这会容易得多。好吧，所以“我做错了”。那么正确的方法是什么呢？我相信这是一个非常常见的用例：父组件正在获取它需要在v-for中传递给子组件的数据。。。。
  created(){
    this.data = {
      message: this.quote
    }
  },