6/1 Vue.js

 自分なりの解釈

コンポーネントフォームでのやり取り　v-model使用

ゴールはコンポーネントで作成したフォームの入力値を親側で受け取ること。

そのために、コンポーネントのテンプレートの中で入力値を監視するためにv-modelでcomutedの処理と紐付けてセッターとゲッターを作成。

セッターで子側のdataに入力を格納しつつthis.$emit('任意のイベント名', value)とすることで親側に入力値を返すイベントを作成。

親側で@任意のイベント名=親側のdata = $eventとすることで親側のdataに入力値を格納して使用できるようになる。

任意のイベント名をinputとすると親側はv-model=親側のdataとすれば再現できる。

これはv-modelでの処理がv-bind:valueと@inputをまとめてディレクティブだから結果的に子側で設定した@inputが実行されるからだと推測。

スロット

コンポーネントで設定できる差し込み口

コンポーネント内のslotタグにname属性をつけると差し込み口に名前をつけることができる。

差し込む際にはv-slot:nameの属性値とすることで指定した場所に挿入することができる。

スコープ付きスロット

差し込むための子側のdataや関数を親側から手に取るための仕組み。

コンポーネントのテンプレート内でv-bindを使用してdataや関数を紐づけておく。

例)

<slot :item="member" name="main">xxx</slot>

これは子側のdataであるmemberを:itemで紐づけている。

親側はv-slot:name(default)="parent"とすることでparentの中のitemの中にmemberが入る。

使用する時は{{ parent.item }}とすると子側のdataであるmemberの値を表示することができるようになる。