【Vue.js】コンポーネントで props を用いてデータを渡す方法

はじめに

Vue.js を学習していてコンポーネントの props でのデータのやりとりに少しつまづいたので書きます。

この記事で書くこと

Vue.js のコンポーネント props を使って 親 → 子
親Vueインスタンスから子コンポーネントにデータを渡す2つの方法

1. 静的なデータの渡し方
2. 動的なデータの渡し方

1.コンポーネントに静的なデータを渡す

コンポーネントにデータを渡すには、props というオプションを使う。関数を定義するときの引数（仮引数）に似ている。
実際のデータはコンポーネントに属性として渡す。これは関数で言う所の引数（実引数）を渡して関数を呼び出すことに相当する。

main.js

// 子コンポーネントを定義
const nameComponent = {
  props: ['name'],
  // テンプレート内で props name に渡されたデータを利用
  template: `
    <div>{{ name }}</div>
  `,
};

// 親コンポーネントを定義
new Vue({
  el: '#app',
  // コンポーネントの登録
  components: {
    // '登録名(HTMLで呼び出す名前)': 登録するコンポーネント名
    'name-component': nameComponent,
  },
});

ここでは props を ['値'] という配列の形で定義したが、オブジェクトの形で定義して、値を検証するためのルール（バリデーション）を定義することもできる。
詳しくはリファレンスを参照。
プロパティ - Vue.js

テンプレート内での記述

index.html

<div id="app">
  <!-- Vueインスタンスに登録したコンポーネントの呼び出し -->
  <name-component name="マツダ"></-component>
</div>

このHTMLタグ要素内の name="マツダ" の部分で という値をコンポーネントの props にセットしている。

ブラウザでは

マツダ

と渡したデータが表示される

2.コンポーネントに動的なデータを渡す

main.js

const likeComponent = {
  props: ['firstNumber'],
  // propsの値を直接変更するのではなく、propsにはあくまで初期値を設定し、
  // 値を変更する際はdataを経由して変更する
  data() {
    return { count: this.firstNumber };
  },
  // methods で data の値 count の値に 数値を1ずつ足していく関数を定義
  methods: {
    countUp() {
      this.count += 1;
    },
  },
  // テンプレート内は必ずルートを一つに限定する
  // 「@」は「v-on」の省略形 ボタンをクリックで methods で定義した関数を呼ぶ
  template: `
    <div>
      <button @click="countUp"> 
        いいね!!
      </button>
      <div>{{ count }}</div>
    </div>
  `,
};

new Vue({
  el: '#app',
  components: {
    // コンポーネントの登録
    // '登録名(HTMLで呼び出す名前)': 登録するコンポーネント名
    'like-component': likeComponent,
  },
});

propsの値を直接変更するのではなく、props firstNumberには初期値としてセットする。
その上で、ボタンをクリックするとpropsではなくdataの値を変更するようにする。

以下の記述は悪い例↓↓

main.js

// 悪い例 main.js コンポーネントのみ抜粋
// このように直接 props のデータを変更しようとするとエラーがでる。

const likeComponent = {
  props: ['firstNumber'],
  methods: {
    countUp() {
      this.firstNumber += 1;
    },
  },
  template: `
    <div>
      <button @click="countUp"> 
        いいね!!
      </button>
      <div>{{ firstNumber }}</div>
    </div>
  `,
};

記述方法の注意点ですが、

コンポーネントの props：likeComponent とキャメルケースで記述
テンプレートの属性名（コンポーネントを登録するとき）：like-Component とケバブケースで記述

index.html

<div id="app">
  <!-- v-bindディレクティブで関連付け（「:」は「v-bind」の省略形） -->
  <like-component :first-number="10"></like-component>
</div>

:first-number="10"でpropsに数値として値を渡すことができる。

表示はこのようになり、「いいね!!」ボタンを押すと10に数字が１ずつ加算されていく。

最後に

記事をお読みいただきありがとうございます！！
Vue.js も JavaScript も楽しいですが難しい部分も多々！

誤り等々ありましたら、ご指摘等いただければ幸いです!