Vueの親子間コンポーネントのデータの受け渡しが
よくわからなくなるので忘備録。
今回試したやつ
「子にあるボタンをクリックして、親が持ってるdataを操作」
- 子に@click="submitOya" ←子供が親に送る言葉
- methods内に"submitOya"でthis.$emit('close');を記述
- 親の子タグ内に@close="tojimasu" ←親が子の'close'を受け取り
- methods内に"tojimasu"で「ドア閉じてー」という内容を記述
子コンポーネントのボタン
子供側のvue（子コンポーネント）に書いてね。
<button @click="submitOya">子から親へボタン</button>
@click="submitOya" ← ここが親へ送るための記述
クリックしたら"submitOya"を発動してねって意味。
次に子のmethods内に"submitOya"の内容を書く。
methods:{
submitOya: function(){
this.$emit('close');
}
}
submitOyaがclickされたら'close'っていう言葉を送ります。
親に向かって、子供が「閉じてねー！」って言ってる感じを想像。
親へ送るときには$emitってやつを使います。※this.を忘れずに！
この時点では子供が親に向かって「閉じてねー(close)！」って言ってるだけなので、
次は親が受け取る準備をします。
親の受け取り
親側のvue（親コンポーネント）に書いてね。
<kodomo @close="tojimasu"></kodomo>
受けとるには子供の言葉をそのまま使います。
今回は子供が言った'close'に@をつけて、「閉じてー(close)！」が'tojimasu'で親が受け取り。
受け取ると親が"tojimasu"が発動！
次に親のmethods内に"tojimasu"の内容を書く。
data:function(){
return {
doorStatus: true //「閉じたか」のフラグは親のdata内で持ちます。（trueは空いている状態）
}
},
methods:{
tojimasu: function(){
this.doorStatus = false
}
}
このdata:function()...で
ドアの状態「閉じている、閉じていない」（true/false）のフラグデータを持つ。
'close'する前は、defaultの'doorStatus'（ドア）は'true'で閉じていない状態。
"tojimasu"が発動されたら'doorStatus' は 'false' になり、ドアは閉じます。
このドアはダイアログだったり、
このフラグに対してhasClassしたりして、CSSで色々できそうですね。
親から子供へデータを渡したい時は、、、これ読んでくだせぇ。
Vue 親から子へ コンポーネント間のデータ受け渡し
https://qiita.com/fukuman/items/b7e15a8dab4ebb870952