vue props 从父组件传递到子组件答案

【问题标题】：vue props passing from parent component to childvue props 从父组件传递到子组件
【发布时间】：2020-07-26 10:12:52
【问题描述】：

我有一个容器组件，里面有一个导航栏组件。我在 beforeCreate 中调用了一个 api，然后在这里设置变量，并在 vue 'state'（数据）中设置它们，然后将它们作为道具传递给导航栏组件。但是，这些都不会出现。我在这里做错了什么？

<template>
<Navbar :title='title' />
<template>

<script>
export default{
name:'example',
data(){
    return{
        title:''
    };
},
beforeCreate: function(){
    axios.post('')
    .then(response => {
        this.title = response.title
   })
}
}
</script>

我已经控制台记录了来自 api 的响应数据，所以我知道它正在正确地生成数据。我还在已安装的生命周期中控制台记录了数据变量“标题”，它有数据。但是导航栏的 props 还是空的。

【问题讨论】：

您的<script> 标记中缺少封闭的export default { }。是不是搞错了？
对不起，这只是一个例子。我的实际代码中有这个。
你能创建一个示例沙箱吗？
尝试在created 方法中添加您的axios 请求而不是beforecreate
@tao 没有一个答案是正确的。 Axios 使用 Promise 并异步检索响应，而不考虑缓存。 this.title = response.title 保证在组件安装后被评估。为此使用 beforeCreated 会产生误导，但这里肯定不是问题。

标签： vue.js

【解决方案1】：

只需在beforeCreate 生命周期方法中，您的data 对象尚未加载，因此您此时无法调用它，因此最好使用created 方法

beforeCreate()

这是在 Vue JS 中被调用的第一个生命周期钩子，它在 Vue 实例初始化后立即被调用。

创建()

在beforeCreated 钩子之后调用的第二个生命周期钩子。在这个阶段，Vue 实例已经被初始化并激活了计算属性、观察者、事件、数据属性和随之而来的操作。

created: function(){
    axios.post('')
    .then(response => {
        this.title = response.title
   })
}

【讨论】：

你没有遵循你自己对 Vue 生命周期的解释。发生 beforeCreated 时永远不会访问数据。 this.title = response.title 发生在组件安装之后，因此在创建之后。
你说得对，他可以在挂载方法中添加请求，但在大多数情况下，在创建方法中会更好，但我解释的内容我没有在解释中谈论挂载方法

【解决方案2】：

beforeCreate 在数据观察之前被调用。使用 beforeMount

重试

【讨论】：