vue-02-component.html

Let's type "viewModel1.data1='bar'" on "Chrome -> F12 -> Console"

Let's type "viewModel2.groceryList.push({ id:100, text: 'New item' })" on "Chrome -> F12 -> Console"

コンポーネントは、propでテンプレート構文側で利用可能な属性を定義できる（Angularの@input相当）

親側の持つ値は、上記で定義した属性にv-bind:して渡す

サンプルでは行っていないが、"v-bind=オブジェクト"とすると、オブジェクトを展開してすべてバインドする

子コンポーネント側のpropを書き換えることは許可されていない

子コンポーネントが渡された値を初期値として扱い、親とは独立して動作したいのなら、data()も併せて定義すればよい

サンプルではグローバル登録しか行っていないが、ローカル登録する方法もある

バリデーション、emits、属性の継承、v-modelの詳細などは、公式サイトを参照のこと