【Vue.js】コンポーネント間でのデータ受け渡し

親から子へデータを受け渡す

子コンポーネント上でpropsを使って、親から子へ受け渡しをしたい値の変数名を定義していく。
propsはプロパティの略。配列かオブジェクトで記載していく。

propsは「,」カンマで区切る事で、複数作ることが可能。

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

親コンポーネントのtemplate上でv-bindを使用し、propsで定義した変数名を表示させる。

v-bindは「:」に省略して記載することが可能。

<template>
  <div>
    <Count :number="number"></Count>
  </div>
</template>

JavaScript上では、キャメルケースで記載する。
DOMテンプレートに書く場合は、ケバブケースを用いる。

最初の単語以降、頭文字を大文字にした書き方

countHeader 　

単語の間に「-」ハイフンを用いる書き方。

count-header

子コンポーネント側でカスタムイベントを作成する。
$emitを使う事で、親（App.vue）のイベント発火をする事ができる。

this.$emit(‘第1引数[イベント名]’,第2引数[親に送りたい値]);

第1引数のカスタムイベント名は、ケバブケースで命名する。

methods: {
  count() {
   this.$emit('click-count',this.number + 100);
}

親側では、v-onを使ってカスタムイベントを実装する。
v-onは「@」で省略可能。
v-onの後に来るイベント名は、先ほど子で命名したカスタムイベント名を入れる。

<Count :number="number" @click-count="number = $event"></Count>

カスタムイベントの実装は、methodに処理をまとめる方法もある。

<Count :number="number" @click-count="countNumber"></Count>

  methods:{
      countNumber(value){
          this.number = value;
      }
  }