propsと$emitによるデータのやりとり

はじめに

Vue.jsは１つのコンポーネントで実装するよりも、粒度に応じて複数のコンポーネントに分解して実装する方がよいとされている。そのようが、ソースコードの可読性やメンテナンス性、コンポーネントの再利用性も活かすことができて便利なためだ。だが、複数のコンポーネント間でデータのやり取りも必要不可欠になり、そこがVue.jsの扱いで最も難しいとされる箇所の１つなのではないかと思う。
そこで今回は自分が忘れてしまってからも当記事を確認するだけですぐに思い出せるように、簡単に実装例も交えつつ、「props」「emit」について取り上げます。

emit, propsとは

コンポーネント間には親と子という概念がある。片方のコンポーネントがもう片方のコンポーネントを取り込み（import）するとき、importする側を「親」,importされる側を「子」と呼ぶ。そして、親から子へデータを伝達する手段を「props」。子から親へデータを伝達する手段を「emit」としている。

propsの使い方（親から子へデータを送る）

V-bind(:)を経由して親から子へデータを送信して、子でpropsを使ってプロパティという形で親からのデータを受け取って利用できる。

親からv-bindでデータを子へ送る

Parents.vue

<template>
  //親で扱ってるデータをバインドしてそのプロパティとして子へデータ送る
  <Child
   :param0=“item”
   :param1=“value”
  />
<template>
<script>
  import Child from './components/Child.vue'
  components: {
    Child
  },
</script>

子でprops内のプロパティをという形で親が飛ばしたデータを受け取ってdataのように利用できる

Child.vue

//親から送られてきたデータを受け取りdataのように使う
props: [“item”,  “value”]

emitの使い方（子から親へデータ送る）

emitを使ったカスタムイベントで子から親へデータが渡される。
カスタムイベントとは、子コンポーネント内「@click」のイベントがクリックされると同時に発火する$emitを使用したイベントのこと。子コンポーネント内で親に送りたいデータを引数にした「$emit」が発火すると、親でそのイベントが違う名前のmethodsに渡されて、そのmethodsが発動する。つまり、子で発火してその引数がデータとして親に渡されて親のmethods内で関数として使われる。
子から親へデータを渡すには、@clickや@changeなどのなにかしらのイベントが必要になってくる。

Child.vue

<template>
  <div>
    <p>child_num: {{ child_num }}</p>
　　　　　　　　//@clickイベントでmethodsのsendが発動
    <button @click='send'>親に値を渡す</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      child_num: 0
    };
  },
  methods: {
　　　　　　　　//関数内のカスタムメソッド$emitが発火し、引数として親に送りたいデータを渡すことができる
    send() {
      this.$emit("my-click", this.child_num);
    }
  }
};
</script>
</script>

Parents.vue

<template>
  <div>
    <p>parent_num: {{ parent_num }}</p>
　　　　　　　　//子のカスタムメソッドを親の関数として使う
    <Child @my-click='reflectNum'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  data: function() {
    return {
      parent_num: 100
    }
  },
  components: {
    Child
  },
  methods: {
　　　　　　　　//子のカスタムイベントで引数にしたデータはこちらで受け取る(子から親へデータ渡す)
    reflectNum(value) {
      this.parent_num = value
    }
  }
}
</script>