【Vue.js】親コンポーネントから子コンポーネントへの基本型props値の動的伝播

親コンポーネントから子コンポーネントへデータを受け渡す手段として props を使用できます。
これは非常にベーシックかつ便利な手段で、動的なデータであっても親コンポーネントの変更があれば子コンポーネントにその状態変化を伝えることができます。
（ただし子コンポーネントから親コンポーネントへの伝播はご法度です。変更そのものはできますが、Warningが発生します）

親コンポーネント側テンプレート

<!--postsはオブジェクト{id: number, title: string}の配列-->
<template v-for="p in posts"><blog-content post="p"/></template>

子コンポーネント側定義

Vue.component('blog-content', {
  props: ['post'],
  template: '<template>id:{{post.id}} title:{{post.title}}</template>'
});

ただし、基本型を渡すときはその値がコピーとして渡るので注意が必要です。
例えば、以下のようなプロパティ渡しでは、初回の値こそ共有されますが、変更後の値は子コンポーネントへは反映されません。

親コンポーネント側テンプレート

<!--isEnabledの型はboolean-->
<template>
    <my-dialog :enable="isEnabled" />
</template>

子コンポーネント側定義

Vue.component('my-dialog', {
  props: ['enable'],
  template: '<template v-if="enable">dialog</template>'
});

この場合、基本型をオブジェクトでラップし、生成したオブジェクトへの参照を渡すことで動的変更内容を反映させます。

親コンポーネント側テンプレート

<template>
    <my-dialog :enable="{ isEnabled }" />
</template>

子コンポーネント側定義

Vue.component('my-dialog', {
  props: ['enable'],
  template: '<template v-if="enable.isEnabled">dialog</template>'
});