Как передать данные от родительского к дочернему компоненту в Vue

Question

Я создаю карточную игру, используя Vue. js и Laravel. Я хотел бы передать значение remaining_cards от родителя (Card. vue) ребенку (Footer. vue), используя Vue. js. Поэтому, когда значение remaining cards обновляется, даже значение, отображаемое в нижнем колонтитуле, делает это.

Card. vue:

<template>
    <div>
        <app-header></app-header>
        <div class="row justify-content-center align-items-center mt-4">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_left_invisible}" id="pc_left" v-bind:rel="pc_left_rel">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_center_invisible}" id="pc_center" v-bind:rel="pc_center_rel">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_right_invisible}" id="pc_right" v-bind:rel="pc_right_rel">
        </div>
        <div class="row mt-4">
            <div class="col-3 d-flex justify-content-start pl-5">
                <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pack_cards_invisible}" id="pack_cards" rel="0">
            </div>
            <div class="col-6 d-flex justify-content-center">
                <img v-bind:src="pc_game_src" v-bind:class="{card:true, invisible:pc_game_invisible}" id="pc_game" v-bind:rel="pc_game_rel">
                <img v-bind:src="player_game_src" v-bind:class="{card:true, invisible:player_game_invisible}" id="player_game" v-bind:rel="player_game_rel">
            </div>
            <div class="col-3 d-flex justify-content-end pr-5">
                <img v-bind:src="game_briscola_src"  v-bind:class="{card:true, invisible:game_briscola_invisible}" id="game_briscola" v-bind:rel="game_briscola_rel">
            </div>
        </div>
        <div class="row justify-content-center align-items-center mt-4">
            <img @click="play($event)" v-bind:src="player_left_src" v-bind:class="{card:true, invisible:player_left_invisible}" id="player_left" v-bind:rel="player_left_rel">
            <img @click="play($event)" v-bind:src="player_center_src" v-bind:class="{card:true, invisible:player_center_invisible}" id="player_center" v-bind:rel="player_center_rel">
            <img @click="play($event)" v-bind:src="player_right_src" v-bind:class="{card:true, invisible:player_right_invisible}" id="player_right" v-bind:rel="player_right_rel">

        </div>
        <app-footer></app-footer>
    </div>
</template>

<script>
import Footer from "./Footer.vue"
export default {
    components: {
        'app-footer': Footer
    },
    data() {
        return {
            remaining_cards: 40,
        }
    },

}

Нижний колонтитул . vue:

<template>
    <div>
        <footer class="bg-dark fixed-bottom">
            <div class="container">
                <div class="row mt-3">
                    <div class="col-sm-8 text-left">
                        <p>Missing cars: {{ remaining_cards }}</p> <!-- here -->
                    </div>
                    <div class="col-sm-4 text-right">
                        <p>{{ copyright }}</p>
                    </div>
                </div>
            </div>
            <!--<p id="footer-left" class="mt-3 ml-3">Missing cars:</p>
            <p id="footer-right" class="mr-3">{{ copyright }}</p>-->
        </footer>
    </div>
</template>
<script>
    export default {
        props: ['remaining_cards'],
        data() {
            return {
                copyright: "Powered by Me"
            }
        }
    }
</script>

Однако по какой-то причине значение remaining_cards остается пустым в нижнем колонтитуле, и, кроме того, я не вижу ошибок. Может помочь?

Answer 1

<app-footer :remaining_cards="remaining_cards"></app-footer>