- 首页
- 前端开发
- 传递给子组件的道具在 created 方法中未定义
传递给子组件的道具在 created 方法中未定义
[英] Prop passed to child component is undefined in created method
本文介绍了传递给子组件的道具在 created 方法中未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是 Vue.js 2.
我在将值作为道具传递给子组件时遇到问题.我正在尝试将 card 传递给 card-component.
在 card-component 中，我可以访问 Card go here {{card}} 部分中的道具.
但是，当我尝试在 created 或 mounted 方法中访问它时，它是 undefined.
家长:
<div class="容器"><div class="row"><div class="col-md-8 col-md-offset-2"><card-component :card="place.card"></card-component>
</模板><脚本>从'./CostComponent'导入CostComponent；从 './CardComponent' 导入 CardComponent；导出默认{成分: {成本组件、卡片组件},道具:['id']，数据() {返回 {地方: []}},创建(){axios.get('/api/places/' + this.id).then(response => this.place = response.data);}}
孩子:
<div class="容器"><div class="row"><div class="col-md-8 col-md-offset-2"><ul class="list-unstyled">卡在这里{{card}}
</模板><脚本>从 './CardItemComponent' 导入 CardItemComponent;导出默认{成分: {卡片项目组件},道具:['卡片']，创建(){控制台日志(此卡)；//不明确的},安装(){控制台日志(此卡)；//不明确的},}
我在谷歌上搜索了很多，但我找到的解决方案都没有解决我的问题.
解决方案
这纯粹是时间问题.这是发生了什么...
- 您的父组件已创建.此时它有一个分配给
place 的空数组(这也是一个问题，但我稍后会谈到).异步请求开始 您的父组件通过其模板创建一个 CardComponent 实例
在这个阶段，place仍然是一个空数组，因此place.card是未定义的
CardComponent created 钩子运行，记录 undefinedCardComponent 被挂载并且它的 mounted 钩子运行(与 created 相同的记录结果)- 您的父组件已挂载
- 在此之后的某个时刻，异步请求解析并将
place 从空数组更改为对象，大概具有 card 属性. - 新的
card 属性被传递到您的 CardComponent 中，它会被动地更新其模板中显示的 {{ card }} 值.
如果你想在card道具数据发生变化时捕捉，可以使用beforeUpdate钩子
beforeUpdate() {console.log(this.card)}
演示
Vue.component('CardComponent', {模板:'<pre>card = {{ card }}</pre>',道具:['卡片']，创建(){console.log('created:', this.card)},挂载(){console.log('mounted:', this.card)},更新前(){console.log('beforeUpdate:', this.card)}})新的 Vue({el: '#app',数据: {地方: {}},创建(){setTimeout(() => {this.place = { 卡片:'黑桃 A' }}, 2000)}})
<script src="https://cdn.jsdelivr.net/npm/vue"></script><div id="应用程序"><card-component :card="place.card"/>
参见 https://vuejs.org/v2/guide/instance.html#生命周期图
<小时>如果 place 是一个对象，你不应该将它初始化为一个数组.此外，如果您的 CardComponent 依赖于存在的数据，您可能需要有条件地呈现它.
例如
data() {返回{地点:空}}
和
然后 CardComponent 只会在 place 有数据之后创建和安装.
I am using Vue.js 2.
I have a problem with passing value to the child component as a prop. I am trying to pass card to card-component.
In card-component I can access the prop in the Card goes here {{card}} section.
However when I try to access it in created or mounted methods it's undefined.
Parent:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<card-component :card="place.card"></card-component>
</div>
</div>
</div>
</template>
<script>
import CostComponent from './CostComponent';
import CardComponent from './CardComponent';
export default {
components: {
CostComponent, CardComponent
},
props: ['id'],
data() {
return {
place: []
}
},
created() {
axios.get('/api/places/' + this.id)
.then(response => this.place = response.data);
}
}
</script>
Child:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ul class="list-unstyled">
Card goes here {{card}}
</ul>
</div>
</div>
</div>
</template>
<script>
import CardItemComponent from './CardItemComponent';
export default {
components: {
CardItemComponent
},
props: ['card'],
created() {
console.log(this.card); // undefined
},
mounted() {
console.log(this.card); // undefined
},
}
</script>
I did a lot of googling but none of the solutions I found have fixed my issue.
解决方案
This is purely a timing issue. Here's what happens...
- Your parent component is created. At this time it has an empty array assigned to
place (this is also a problem but I'll get to that later). An async request is started
Your parent component creates a CardComponent instance via its template
<card-component :card="place.card"></card-component>
at this stage, place is still an empty array, therefore place.card is undefined
- The
CardComponent created hook runs, logging undefined
- The
CardComponent is mounted and its mounted hook runs (same logging result as created)
- Your parent component is mounted
- At some point after this, the async request resolves and changes
place from an empty array to an object, presumably with a card property.
- The new
card property is passed down into your CardComponent and it reactively updates the displayed {{ card }} value in its template.
If you want to catch when the card prop data changes, you can use the beforeUpdate hook
beforeUpdate () {
console.log(this.card)
}
Demo
Vue.component('CardComponent', {
template: '<pre>card = {{ card }}</pre>',
props: ['card'],
created () {
console.log('created:', this.card)
},
mounted () {
console.log('mounted:', this.card)
},
beforeUpdate () {
console.log('beforeUpdate:', this.card)
}
})
new Vue({
el: '#app',
data: {
place: {}
},
created () {
setTimeout(() => {
this.place = { card: 'Ace of Spades' }
}, 2000)
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<card-component :card="place.card" />
</div>
See https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
If place is meant to be an object, you should not be initialising it as an array. Also, if your CardComponent relies on data being present, you may want to conditionally render it.
For example
data () {
return { place: null }
}
and
<card-component v-if="place" :card="place.card"></card-component>
then CardComponent will only be created and mounted after place has data.
这篇关于传递给子组件的道具在 created 方法中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
