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

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

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

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

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

Count.vue
01 02 03 04 05 06 07 08 09 10	`<script>` `export default {` `props: ["number"],` `methods: {` `count() {` `this.number += 1;` `}` `}` `};` `</script>`

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

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

App.vue<template>
  <div>
    <Count :number="number"></Count>
  </div>
</template>

App.vue
1 2 3 4 5	`<template>` `<div>` `<Count` `:number="number"></Count>` `</div>` `</template>`

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

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

countHeader 　

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

count-header

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

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

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

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

Count.vue
1 2 3 4	`methods: {` `count() {` `this.$emit('click-count',this.number + 100);` `}`

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

App.vue
1	`<Count` `:number="number"` `@click-count="number = $event"></Count>`

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

App.vue template
1	`<Count` `:number="number"` `@click-count="countNumber"></Count>`

App.vue scriptmethods:{
    countNumber(value){
        this.number = value;
    }
}