Question

我已经尝试了很多，但是我无法弄清问题所在。从其他地方可以看到，传递给子组件的变量在父项中的数据可用之前以undefined的形式发送。

请参阅此处以供参考：

<template>
  <div id="app">
    <child :parentData="data.message"/>
  </div>
</template>

<script>
import Child from "./components/Child";

export default {
  name: "App",
  components: {
    Child
  },
  computed: {
    quote() { return 'Better late than never' }
  },
  data() {
    return {

      data: { message: this.quote } ,

    thisWorks: { message: "You can see this message if you replace what is passed to the child"  }

    };
  }

};
</script>

然后在孩子中：

<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>

Answer 1

答案是，您无法访问this.quote的值，因为在创建data object的那一刻，computed object实际上不存在。

这是一种替代方法，我们将使用created()生命周期挂钩来更新data object的值：

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

您无需更改任何内容，只需添加这些代码行即可。

我已经在您的CodeSandbox项目中测试了这些代码，它的工作原理很吸引人。

希望它会有所帮助！

VueJS将计算数据作为prop传递时返回未定义

1 个答案: