Vue.jsにおいて、親コンポーネントの値を動的に子コンポーネントにわたす方法を教えて下さい

前提

実現したいこと

2つの子コンポーネントのいいねの数を親コンポーネントで受け取り、更に別の子コンポーネントで合計のいいね数を表示しています。
親コンポーネントで表示しているいいね数をリセットする機能を実装したいのですが、合計のいいね数を0にできても子コンポーネントのいいね数を0に出来ません。

該当のソースコード

App.vue
1import LikeNumber from './components/LikeNumber.vue'
2
3<template>
4  <div>
5    <LikeHeader :totalNumber="number"></LikeHeader>
6    <LikeNumber @total-increment="increment"></LikeNumber>
7    <LikeNumber @total-increment="increment"></LikeNumber>
8    <button @click="reset">reset</button>
9  </div>
10</template>
11<script>
12import LikeHeader from './components/LikeHeader.vue'
13export default {
14  data(){
15    return{
16      number:0
17    }
18  },
19  methods:{
20    increment(){
21      this.number += 1
22    },
23    reset(){
24      this.number = 0
25    }
26  },
27  components:{
28    LikeHeader
29  }
30}
31</script>
32

LikeHeader.vue
1<template>
2    <div class="header">
3        <p>Total Good</p>
4        <p>{{ showNum }}</p>
5    </div><!-- /.header -->
6</template>
7<script>
8export default {
9    props:{
10        totalNumber:{
11            type:Number,
12            default:10
13        }
14    },
15    computed:{
16        showNum(){
17            return(
18                this.totalNumber
19            )
20        }
21        
22    }
23}
24</script>

LikeNumber.vue
1<template>
2    <div>
3     <p>Good({{ number }})</p> 
4     <button @click="increment">+1</button>
5    </div>
6  </template>
7  <script>
8  export default{
9      export default{
10    props:{
11      number:{
12        type:Number,
13        default:0
14      }
15    },
16    methods:{
17        increment(){
18            this.number += 1;
19            this.$emit('total-increment', this.number)
20        }
21    }
22  }
23  </script>
24

試したこと

LikeHeaderのnumberはApp.vueのnumberに応じて変化するにも関わらず、reset()で0に変えてもLikeNumberのnumが変わらない理由がわかりません。

よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

LikeHeaderのnumberはApp.vueのnumberに応じて変化するにも関わらず、reset()で0に変えてもLikeNumberのnumが変わらない理由がわかりません。

LikeHeaderは親コンポーネントとpropsで紐づいているため動的に変わります。
LikeNumberもpropsで紐づければ同じ動きになると思います。

App.vue
1（略）
2    <LikeHeader :totalNumber="number"></LikeHeader>
3    <LikeNumber :totalNumber="number" @total-increment="increment"></LikeNumber>
4    <LikeNumber :totalNumber="number" @total-increment="increment"></LikeNumber>
5（略）

LikeNumber.vue
1<template>
2	<div>
3		<p>Good({{ totalNumber }})</p>
4		<button @click="increment">+1</button>
5	</div>
6</template>
7<script>
8export default {
9	props: {
10		totalNumber: {
11			type: Number,
12			default: 10
13		}
14	},
15（略）

投稿2023/01/27 16:19

donkuri

総合スコア81

kss

2023/01/30 08:42

ご回答ありがとうございます。とても参考になりました。LikeNumberもpropsに紐づける必要があったのですね。

行動規範の内容に同意します

かなり無理矢理な実装ですが、とりあえず以下で動いてます

親

html
1<!-- https://teratail.com/questions/k9a3uom29j319c -->
2
3<template>
4  <div>
5    <LikeNumber :numbering="0"></LikeNumber>
6    <LikeNumber :numbering="1"></LikeNumber>
7    <button @click="reset">Parent reset</button>
8    <div>
9      number
10      {{ numbers[0] + numbers[1] }}
11    </div>
12  </div>
13</template>
14
15<script>
16import LikeNumber from '../components/LikeNumber.vue'
17
18export default {
19  data(){
20    return{
21      numbers: [0,0],
22    }
23  },
24  methods:{
25    reset(){
26      this.numbers = [0,0]
27    }
28  },
29  components:{
30    LikeNumber
31  }
32}
33</script>

子

html
1<template>
2  <div>
3    <p>Good({{ $parent.numbers[this.numbering] }})</p>
4    <button @click="increment">+1</button>
5  </div>
6</template>
7<script>
8export default {
9  props: {
10    numbering: {
11      type: Number,
12    }
13  },
14  methods: {
15    increment() {
16      this.$parent.numbers[this.numbering] += 1;
17    },
18  }
19}
20</script>