Vue.jsでコンポーネント間でデータのやり取りをする

Vue.jsで親子のコンポーネント間でデータのやり取りをする方法を試してみます。
使用しているVueのバージョンは2系になります。

親から子にデータを渡す

親コンポーネントをParent.vue、子コンポーネントをChild.vueとして試してみます。
まずは子コンポーネントにデータを渡す方法です。

Child.vue

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

<script>
export default {
  props: ['text']
}
</script>

propsで親コンポーネントから受け取りたい値の名前を指定します。
次にParent.vueです。

Parent.vue

<template>
  <div>
    <Child text="親からの値"/>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  }
}
</script>

子コンポーネントで指定した名前(text)を属性として指定します。
これで親コンポーネントから子コンポーネントへ値を渡すことができました。

子から親にデータを渡す

次に子コンポーネントから親にデータを渡す方法ですが、子から親へデータを渡す場合、何らかのイベント発生のタイミングでデータを渡す形になります。

Child.vue

<template>
  <div>
    <button @click="clickEvent">ボタン</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickEvent() {
      this.$emit('custom-click', '送る値');
    }
  }
}
</script>

ボタンをクリックするとclickEventが実行され、その中で$emitを使って親コンポーネントにデータを渡しています。
$emitの引数は1つ目がカスタムイベント名、2つ目がイベント時に渡す値を指定します。

次にParent.vueです。

Parent.vue

<template>
  <div>
    <p>{{ text }}</p>
    <Child v-on:custom-click="getEvent"/>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      text: '初期値'
    }
  },
  methods: {
    getEvent($event) {
      this.text = $event;
    }
  }
}
</script>

v-onで子コンポーネントで指定したカスタムイベント名(custom-click)を設定し、受け取った際に実行する関数(getEvent)を指定します。
その引数に子コンポーネントから渡されたデータが入っているので、適宜使用する形になります。