Vueのvalueプロパティ。親で定義してないのに子のpropsにvalueがある理由。
子のpropsにvalueがあるのに、親のどこを探してもvalueがなくデータ元が不明すぎて散々悩んだので、その解決法について。
>propsの役割
親から子へのデータ受け渡しで、子のpropsプロパティに受け取る変数を定義する。
結論
v-modelで渡すデータの初期設定がvalueだった。。(text要素の場合)
親
<TextFiled
v-model="rows"
/>
子(TextField)
export default {
props:{
value={},
}
親のv-model="rows"
でrowsという変数をTextFieldに渡している。
このとき、データはvalueに格納されている。
つまり、親から子へのデータ受け渡しだけに着目すると、以下2つは同じになる。
v-model="rows"
⇅
:value="rows"
v-modelのデフォルトの変数
要素 | 初期プロパティ名 | 初期イベント名 |
---|---|---|
text要素/textarea要素 | value | input |
チェックボックス/ラジオボタン | checked | change |
セレクトボックス | value | change |