Javascript 如何在Vue中将数据从父组件传递到子组件
我正在使用Vue.js和Laravel创建一个纸牌游戏。我想使用vue.js将剩余的_卡的值从父Card.vue传递到子Footer.vue。因此,当剩余卡片的值更新时,即使是页脚中显示的值也要更新 Card.vue:Javascript 如何在Vue中将数据从父组件传递到子组件,javascript,vuejs2,Javascript,Vuejs2,我正在使用Vue.js和Laravel创建一个纸牌游戏。我想使用vue.js将剩余的_卡的值从父Card.vue传递到子Footer.vue。因此,当剩余卡片的值更新时,即使是页脚中显示的值也要更新 Card.vue: <template> <div> <app-header></app-header> <div class="row justify-content-center align-items
<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>
然而,由于某些原因,剩余的_卡的值在页脚中仍然为空,而且我没有看到任何错误。你能帮忙吗
<app-footer :remaining_cards="remaining_cards"></app-footer>