WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

Vue.js 親子コンポーネントにおけるデータのやり取り

Vue.js 親子コンポーネントにおけるデータのやり取り

SPONSOR

お疲れ様です、ナガです。

コンポーネントの親子間における、データ送受信の流れがいまいち分かっていなかったのでメモです。

子コンポーネント

子コンポーネントに親コンポーネントからデータを受け取るために props を用意します。

コンポーネントで定義するので data は初期データオブジェクトを返す関数として宣言します。

親にデータを渡す関数を発火させるために $emit でカスタムイベントを登録して、引数には親に渡したいデータ childData を渡します。

Vue.component('child-box', {
  template: `<div class="box">
    <h3>子コンポーネント</h3>
    <p>{{ parentData }}</p>
  </div>`,
  props: ['parentData'],
  data: function() {
    return {
      childData: '子コンポーネントのデータ'
    }
  },
  created: function(){
    this.$emit('send-child-data', this.childData);
  }
});

親コンポーネント

親コンポーネントは子コンポーネントに渡すデータと、子コンポーネントから受け取る為に空のデータを用意します。

  • parentData => 子コンポーネントに渡すデータ
  • childData => 子コンポーネントから受け取るデータ
var vm = new Vue({
  el: '#main',
  data: {
    parentData: '親コンポーネントのデータ',
    childData: ''
  },
  methods: {
    getChildData: function(text){
      this.childData = text;
    }
  }
});

テンプレート

子コンポーネント(child-box)にカスタムイベント send-child-data で、親コンポーネントの getChildData を発火させて、子コンポーネントからデータを受け取ります。

この時、子コンポーネントで $emit した send-child-data の引数には、子コンポーネントが持っているデータを渡しているので、発火させる親コンポーネントの getChildData の引数にそれが渡されます。 渡されたデータが親コンポーネントのデータの childData に代入されます。

子コンポーネントで設定した props: ['parentData'] に親コンポーネントのデータをバインドさせる為に、 v-on:parent-data を設定します。

<div id="main">
  <div class="box">
    <h3>ここは親コンポーネントのスコープ</h3>
    <p>{{ childData }}</p>
    <child-box
      :parent-data="parentData"
      @send-child-data="getChildData"></child-box>
  </div>
</div>

まとめ

  • props => 子コンポーネントが、親コンポーネントからデータを取得するための配列
  • $emit => カスタムイベントを登録。第一引数にはイベント名、第二引数以降は渡したいデータ。
    • vm.$emit('event-name', data..)
  • 親コンポーネントでカスタムイベントに登録したい関数を methods 内に作成する。

  • 子コンポーネントに親のデータをバインドさせる :props-name="parentData" or v-bind:props-name="parentData"
  • 子コンポーネントにカスタムイベントを設定。 @child-custom-event="parentMethodName" で親の関数を発火できる。
  • html の属性はケバブケースで記載する。値はキャメルでも可。

参考

SPONSOR

この記事をシェアする

コメント

関連記事