傳遞給子組件的道具在創建的方法中未定義

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 }}值。

如果你想捕捉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://v2.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有數據后創建和掛載。

Answer 2

確保你有props: true在路由器文件中。 這是一個簡單的解決方案，但我們中的許多人都忘記了這一點。

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