javascript - Vue中父组件向子组件传递数据的方法

Question

我正在使用 Vue.js 和 Laravel 创建纸牌游戏。我想使用 Vue.js 将 remaining_cards 的值从父级 (Card.vue) 传递给子级 (Footer.vue)。因此，当剩余卡的值更新时，即使页脚中出现的值也会更新。

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>