コンポーネントは便利ですが、データの受け渡し方法を理解することで、より便利に使用することができます。

props（親→子：値を渡す）

props: [プロパティ1, [プロパティ2], ...]

親コンポーネントから子コンポーネントへ、値（文字列、数値、配列やオブジェクトなど）を渡すためにはpropsを使用します。

ただし、子コンポーネントから親コンポーネントへ値を渡すことはできません。

また、propsで受け取ったデータを子コンポーネント内で変更することもできません。子コンポーネント側でデータが変更できてしまうと、複雑な構造になってくると、どこでデータが変更されたか親コンポーネント側で把握しにくなるのでこのような仕組みになっているようです。

今回は例として、以下のlistという値を渡してみます。

list: {
  item1: "str1",
  item2: "str2",
  item3: "str3"
}

子コンポーネントでpropsを設定します。今回はpropという名前でプロパティを設定します。

props: ['prop', 'prop2'],
template: `
<p>
  prop：{{ prop }}<br>
  prop2：{{ prop2 }}
</p>
`
};

親コンポーネントで値を渡します。子コンポーネントでpropと言う名前でpropsを設定したので、propというカスタム属性としてデータを渡すことができます。（listをコンポーネントのdataから呼び出すため:prop (v-bind:prop)となっています。※直接値を渡すなら:は不要です。）

<component-child :prop="list" prop2="Hello World!"></component-child>

$emit（子→親：イベント通知）

$emit(カスタムイベント名, [引数1], [引数2], ...)

子コンポーネントから親コンポーネントに対してのカスタムイベントを発生させるには$emitを使用します。

子コンポーネントでボタンがクリックされた時など、何らかの処理が行われた時に$emitを呼び出します。するとイベントが発生し、親コンポーネント側でデータを変更するのに必要なデータをイベントの引数として渡すことができます。

親コンポーネント側ではイベントの発生を検知し、イベントの引数でデータを受け取ることで、親コンポーネント内のデータを変更することができるようになります。

今回は例としてクリックイベントを介して、hogeという文字列を渡してみます。

まず子コンポーネントのクリックイベントで$emitを使用し、click-eventという名前のカスタムイベントを設定し、引数として文字列hogeを渡します。

<button class="c-btn" @click="$emit('click-event', 'hoge')" type="button">click!</button>

親コンポーネントでは子コンポーネントで設定したカスタムイベントclick-eventを呼び出し使用したいメソッドを設定します。ここではcallHogeというメソッドを設定しています。

methods: {
  callHoge: function(data) {
    alert(data);
  }
},
template: `
<div>
  <component-child
    @click-event="callHoge"
  ></component-child>
</div>
  `

子コンポーネントの$emitの引数で設定した文字列hogeが、親コンポーネントのメソッドcallHogeに値として渡されているはずです。

デモ

See the Pen テスト | Vue.js (v2.x) by Ex-365 (@excreative) on CodePen.