【Vue.js】コンポーネントにおける親子間のデータの受け渡し方法を図解で理解する。

#親から子にデーターを渡す

###静的なデーターを渡す

1 子コンポーネントを読み込む
2 読み込んだ子コンポーネントを変数に格納し、componentsプロパティに格納
3 カスタムタグで、templeate内に子コンポーネントを読み込む
4 カスタム属性(number)に渡したい値("6")を設定
5 子コンポーネントのpropsプロパティーで親コンポーネントのカスタム属性の値を受け取る
6 受け取った値を、子コンポーネントのtemplateで表示する。

###動的なデーターを渡す

App.vue

<template>
  <div>
    <likeHeader v-bind:number="number"></likeHeader>
  </div>
</template>

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

export default {
  name: "App",
  data() {
    return {
      number: 10,
    };
  },
  components: {
    likeHeader,
  },
};
</script>

likeHeader.vue

<template>
  <div>
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  props: ["number"],
};
</script>

カスタム属性numberをv-bindの引数にして、dataの返り値numberを値に設定する。

#子から親にデーターを渡す

上: 親コンポーネント
下: 子コンポーネント

1 子コンポーネントのクリックイベントにincrementメソッドを登録する。

2 incrementメソッドで、$emitメソッドによりカスタムイベントmy-clickを発火させる。

3 カスタムイベントmy-click引数は、$emitメソッドの第二引数に設定した"子から来たデータ"という文字列が渡る。

4 親コンポーネントでカスタムイベントmy-clickが発火し、登録しているメソッドrecieveWordが実行される。

5 引数には、"子から来たデータ"という文字列が入っている。

6 this.wordが更新される。

7 this.wordが更新されたので {{word}}の表示が変わる。