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

PROGRAM

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

HTML

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

サンプルを作りましたので、まず、以下にHTMLを示します。

<div id="app">
  <input type="text" v-model="inputValue">
  <child-div :value="inputValue"></child-div>
</div>

上記では、input要素とinputValueプロパティをバインディングさせ、子コンポーネントを呼ぶためにテンプレートのvalue属性にセットしています。

親コンポーネント

親コンポーネントでは特に設定は必要ありません。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      inputValue: '1'
    }
  }
});

ただし、上記のコードではinputValueプロパティを設定しています。

バインディングをさせているのは、リアクティブなデータを子コンポーネントに渡すためです。

子コンポーネント

子コンポーネントでは親コンポーネントのデータを受け取るための設定が必要です。

具体的には、propsを設定して、特定の属性の値を子コンポーネントで取得させます。

Vue.component('child-div', {
  props: ['value'],
  template: '<div>あ{{ value }}</div>',
});

上記のコードでは、テンプレートのvalue属性に埋め込まれたデータを子コンポーネントで使えるようにしています。