Vue道具从父组件传递到子组件

Question

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

<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的响应数据，因此我知道它可以正确生成数据。我还通过控制台在挂载的生命周期中记录了数据变量“ title”，它具有数据。但是导航栏的道具仍然是空的。

Answer 1

在数据观察之前调用

beforeCreate 。使用 beforeMount

重试

Answer 2

仅在beforeCreate生命周期方法中，您的data对象尚未加载，因此您目前无法调用它，因此，最佳做法是使用created方法

beforeCreate（）

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

created（）

第二个生命周期挂钩，它在beforeCreated挂钩之后立即被调用。在此阶段，Vue实例已初始化，并已启动了诸如计算属性，观察程序，事件，数据属性以及其附带的操作之类的事情。

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