How to pass data from parent to child component in Vue

Question

I am creating a card game using Vue.js and Laravel. I would like to pass the value of remaining_cards from the parent (Card.vue) to the child (Footer.vue) using Vue.js. So when the value of remaining cards is updated even the value that appears in the footer do it.

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

}

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

However for some reason the value of remaining_cards remains blank in the Footer and furthermore I don't see any error. Can help?

Answer 1

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