Vue.js 传递给子组件的属性在创建的方法中未定义

我正在使用Vue.js 2

我无法将值作为道具传递给子组件。我正在尝试将

卡

传递到

卡组件

在

card component

中，我可以访问

card goes here{{{card}

部分中的道具

但是，当我尝试在

创建的

或

装入的

方法中访问它时，它是

未定义的

家长：

从“/CostComponent”导入CostComponent；
从“./CardComponent”导入CardComponent；
导出默认值{
组成部分：{
成本组件
},
道具：['id']，
数据（）{
返回{
地点：[]
}
},
创建（）{
axios.get（'/api/places/'+this.id）
.然后（response=>this.place=response.data）；
}
}

儿童：

卡在这里{{Card}

从“/CardItemComponent”导入CardItemComponent；
导出默认值{
组成部分：{
心脏组件
},
道具：[“卡片”]，
创建（）{
console.log（this.card）；//未定义
},
安装的（）{
console.log（this.card）；//未定义
},
}

---

我在谷歌上搜索了很多次，但没有一个解决方案能解决我的问题。

这纯粹是时间问题。下面是发生的事情

将创建父组件。此时，它将一个空数组分配给

位置

（这也是一个问题，但我将在稍后讨论）。异步请求已启动

父组件通过其模板创建一个

CardComponent

实例

在此阶段，

place

仍然是一个空数组，因此

place.card

未定义

创建的

CardComponent

钩子运行，记录
未定义的

已安装

CardComponent

，其

已安装的
钩子运行（与创建的
日志记录结果相同
）

您的父组件已装入

在此之后的某个时刻，异步请求解析并将

place

从空数组更改为对象，可能具有

card

属性

新的

card

属性被传递到您的

CardComponent

中，它会反应性地更新其模板中显示的

{{card}}

值

如果您想在

卡

道具数据更改时捕获，可以使用

更新前

挂钩

更新之前（

{
console.log（此.card）
}

演示

Vue.component（'CardComponent'{
模板：“card={{card}}”，
道具：[“卡片”]，
创建（）{
console.log（'created:'，this.card）
},
挂载（）{
console.log（'mounted:'，this.card）
},
更新之前（）{
console.log（'beforeUpdate:'，this.card）
}
})
新Vue({
el:“#应用程序”，
数据：{
地点：{}
},
创建（）{
设置超时（（）=>{
this.place={牌：黑桃王牌}
}, 2000)
}
})

---

确保路由器文件中有

道具：true

。这是一个简单的解决方案，但我们很多人都忘记了这一点

---

谢谢你的回答。它解释了这一点，也有道理。我怎样才能解决这个问题？我需要我的子组件能够访问card属性（不是空的，而是在异步请求更新之后）@kid_plama我刚刚添加了一个使用

beforeUpdate

hookThank的示例！如果我没弄错的话，我可以和你核实一下吗？所以我将卡传递给子组件的原因是，在子组件中，我需要使用card.id属性获取该卡的数据。因此，我不应该在created（）或mounted（）中执行异步请求，而应该在beforeUpdate（）或updated（）方法中执行异步请求？@kid_plama我添加了更多信息。请参阅我回答末尾的注释谢谢，使用

v-if

渲染组件，或在更新之前使用

方法解决我的问题！
{
  path: '/path-to',
  name: 'Name To',
  component: Component,
  props: true
}