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

这纯粹是时间问题。这就是发生的事情...

您的父组件已创建。目前，它有一个分配给place的空数组（这也是一个问题，稍后我会介绍）。异步请求已启动
您的父组件通过其模板创建一个CardComponent实例
```
<card-component :card="place.card"></card-component>
```
在此阶段，place仍然是一个空数组，因此place.card未定义
CardComponent created钩子运行，记录undefined
已安装CardComponent并运行其mounted钩子（与created相同的日志记录结果）
您的父组件已安装
在此之后的某个时刻，异步请求解析place并将其从空数组更改为对象，并可能具有card属性。
新的card属性向下传递到您的CardComponent中，并以反应方式更新其模板中显示的{{ card }}值。

如果您想在card道具数据更改时赶上，可以使用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将仅在{strong> place有数据之后创建并安装。

Answer 2

确保路由器文件中有 props: true。这是一个简单的解决方案，但我们很多人都忘记了这一点。

{
  path: '/path-to',
  name: 'Name To',
  component: Component,
  props: true
}

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

2 个答案:

演示