Vue.jsコンポーネント通信：親と子の間でデータを渡す方法

Javascript Vue.js フロントエンド

Vue.jsコンポーネント通信：親と子の間でデータを渡す方法

Vue.jsの中で、コンポーネント間でデータを渡すのは一般的な操作であります。この記事では、親コンポーネントから子コンポーネントへデータを渡す基本的な方法について解説します。

目次

  1. はじめに
  2. propsを用いたデータの受け渡し
  3. イベントを用いたデータの受け渡し
  4. 終わりに

はじめに

Vue.jsはコンポーネントベースのフレームワークで、それぞれのコンポーネントは独立しているため、データの受け渡しは重要な作業となります。ここでは、その中でも親コンポーネントから子コンポーネントへのデータの受け渡し方法について説明します。

propsを用いたデータの受け渡し

propsを用いると、親コンポーネントから子コンポーネントへデータを渡すことができます。簡単な例を見てみましょう。

親コンポーネント：

<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "親からのメッセージ"
    }
  }
}
</script>

子コンポーネント：

<template>
  <div>
    {{ message }}
  </div>
</template>

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

この例では、親コンポーネントから子コンポーネントへ"親からのメッセージ"というデータを渡しています。

イベントを用いたデータの受け渡し

イベントを用いると、子コンポーネントから親コンポーネントへデータを渡すことができます。こちらも簡単な例を見てみましょう。

子コンポーネント：

<template>
  <div>
    <button @click="sendData">データ送信</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('childToParent', '子からのメッセージ');
    }
  }
}
</script>

親コンポーネント：

<template>
  <div>
    <child-component @childToParent="receiveData" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveData(data) {
      console.log(data); // 子からのメッセージ
    }
  }
}
</script>

この例では、子コンポーネントから親コンポーネントへ"子からのメッセージ"というデータを渡しています。

終わりに

Vue.jsでは、コンポーネント間でデータを受け渡すためにはいくつかの方法がありますが、親と子の間では主にpropsとイベントを用いることが多いです。これらの方法を理解し、適切に使い分けることでコンポーネント間のデータの受け渡しがスムーズに行えます。