传递给子组件的 prop 在创建的方法中未定义

我正在使用 Vue.js 2。

我在将值作为道具传递给子组件时遇到问题。我正在努力通过card to card-component.

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

但是当我尝试访问它时created or mounted方法是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>

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

这纯粹是一个时间问题。发生的事情是这样的......

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

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

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

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

3. The CardComponent created钩子运行，记录undefined

4. The CardComponent已安装且其mounted钩子运行（与相同的日志记录结果created)

5. 您的父组件已安装

6. 此后的某个时刻，异步请求会解析并更改place从一个空数组到一个对象，大概有一个card财产。

7. The new card财产被传递到你的CardComponent它会反应性地更新显示的{{ card }}其模板中的值。

如果你想赶上cardprop 数据发生更改时，您可以使用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://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

If place是一个对象，您不应该将其初始化为数组。另外，如果您的CardComponent依赖于存在的数据，您可能需要有条件地渲染它。

例如

data () {
  return { place: null }
}

and

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

then CardComponent只会被创建和安装after place有数据。