5/31 Vue.js

自分なりの解釈

v-onとv-bindを使用したフォームのコンポーネント

親から子へはprops 子から親へはthis.$emit('任意のイベント名', 値)

子側(コンポーネント側)で入力値を親側に返すための処理が必要。

this.$emit('任意のイベント名', 返す値)をメソッドやタグ内で設定することで値を返す親側で使用できるイベントを設定できる。

フォームをコンポーネントで作成した場合、親側で受け取る入力値を子側に渡して子側から親側に返すような双方向でデータのやり取りが必要。

仮想DOMのコンポーネントタグの属性に@任意のイベント名とすることで子側で処理した値が親側に返ってくる。

親側返ってきた値を$eventで受け取りつつdataの値に格納することで入力値の入ったdataが使用できるようになる。

入力値の入ったdataをv-bindで子側のpropsに渡す。

渡された入力値をtemplate内で:value=とすることでvalueに入力値が反映される。

処理を追いかけるのが難しい。もっと触れて理解を深める必要がある。

コンポーネントでv-for

v-forで使用するのは親側のdata

展開した中身を使用するのは子側

親側から子側に展開後のデータを渡す必要がある。

そのために使用するのがpropsでタイプ型などを設定しておける。

v-forで展開後の中身が文字列、数値、真偽値、配列、オブジェクトなどあらかじめprops内のtype :で定義しておく。

propsで設定したキーの名前でコンポーネントのtemplate内のタグで使用する

例)　<component-a v-for="member in members"

           item:"member">…

子側　props:{ item:{ type:Object}}

　　　template:`<div> {{ item.name }}</div>`

親側で展開されたmemberを:itemに渡す

子側のpropsでのitemにmemberが格納されてtemplate内でitem.nameとすることで親側dataのmember.nameを表示することができる。