Vue.jsで子から親コンポーネントにデータを渡す方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsで子から親コンポーネントにデータを渡す方法について、簡単に解説していきます。

HTML

Vue.jsでは子から親コンポーネントにデータを渡せます。

ここでは理解をして頂くために、まず、HTMLのサンプルを示します。

<div id="app">
  <div>{{ childValue }}</div>
  <child-input @parent-from-child="getValueFromChild"></child-input>
</div>

上記のコードでは、受け取った子コンポーネントの値を表示するためのchildValueプロパティと子コンポーネントを表示するテンプレートを配置しています。

親コンポーネント

親コンポーネントでは、以下のようにchildValueプロパティを用意します。

var app = new Vue({
  el: '#app',
  data: {
    childValue: '',
  },
  methods: {
    getValueFromChild: function (arg) {
      this.childValue = arg;
    }
  }
});

さらに、親コンポーネント側に子コンポーネントから呼び出すメソッドを用意します。

このメソッドは、子コンポーネントを表示するために置いたテンプレートに埋め込んだカスタムイベントで実行するメソッドです。

子コンポーネント

子コンポーネントでは、親コンポーネント側のメソッドを呼ぶ設定をします。

Vue.component('child-input', {
  data: function() {
    return {
      inputValue: '123',
    }
  },
  template: '<div><input type="text" @input="inputChild" v-model="inputValue"></div>',
  methods: {
    inputChild: function() {
      this.$emit('parent-from-child', this.inputValue)
    },
  },
});

上記のコードでは、input要素のvalue属性の値が変わったときにinputChildメソッドが呼ばれるようにしています。

さらに、inputChildメソッド内で、$emitメソッドを使って、第一引数のカスタムイベントを経由して、第二引数の子コンポーネントのデータを親コンポーネントに渡しています。