親子コンポーネント間でのデータの受け渡し

親コンポーネントから子コンポーネントまで

main.js

import Vue from 'vue';
import App from './App.vue';
import LikeNumber from './components/LikeNumber.vue';

Vue.config.productionTip = false;
Vue.component("LikeNumber", LikeNumber);

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber number="6"></LikeNumber>
  <LikeNumber number="6"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>

LikeNumber.vue

<template>
<div>
  <p>いいね({{ number / 2 }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: ['number'],
  methods: {
    increment(){
      this.number += 1;
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>

LikeHeader.vue

<template>
  <p>いいね数合計</p>
</template>

propsはpropertyの略

＜子＞
（１）numberという値を使いたいところが「子」コンポーネントになります。今回はLikeNumber.vue
(2)propsは配列で使いたい値の名前を書きます。[子コンポーネントで定義します]
＜親＞
（１）属性名で定義する[]＊なるべくケバブケースで定義する

propsの命名規則

キャメルケース	ケバブケース
totalNumber	total-number

*ブラウザに直接渡すものはHTMLの慣例としてケバブケースで書くようにする。
理由）ブラウザは大文字を認識できずに全て小文字で解釈するため。

（参考）App.vueのnumberを動的に表現するためv-bindを使用

<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber v-bind:number="number"></LikeNumber>
  <LikeNumber :number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 10
    };
  },
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>