传递给子组件的道具在 created 方法中未定义

Question

我正在使用 Vue.js 2。

我在将值作为道具传递给子组件时遇到问题。我正在尝试传递card给card-component.

在card-component我可以访问该Card goes here {{card}}部分中的道具。

但是，当我尝试在created或mounted方法中访问它时，它是undefined.

家长：

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

孩子：

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

我做了很多谷歌搜索，但我找到的解决方案都没有解决我的问题。

Answer 1

这纯粹是时间问题。这是发生了什么......

1. 您的父组件已创建。此时它分配了一个空数组place（这也是一个问题，但我稍后会谈到）。异步请求已启动

2. 您的父组件CardComponent通过其模板创建一个实例

   <card-component :card="place.card"></card-component>
   

   在这个阶段，place仍然是一个空数组，因此place.card是未定义的

3. 该CardComponent created挂钩会，记录undefined
4. 的CardComponent被安装和其mounted钩运行（相同的日志记录的结果created）
5. 您的父组件已安装
6. 在此之后的某个时刻，异步请求解析并place从空数组更改为对象，大概具有card属性。
7. 新card属性传递给您CardComponent，它会被动地更新{{ card }}其模板中显示的值。

如果你想在cardprop 数据发生变化时捕捉，可以使用beforeUpdate钩子

beforeUpdate () {
  console.log(this.card)
}

演示

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>

见https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

如果place是一个对象，则不应将其初始化为数组。此外，如果您CardComponent依赖于存在的数据，您可能希望有条件地呈现它。

例如

data () {
  return { place: null }
}

和

<card-component v-if="place" :card="place.card"></card-component>

那么CardComponent只有在 place有数据后才会被创建和挂载。