Vue 子から親へ コンポーネント間のデータ受け渡し

Vueの親子間コンポーネントのデータの受け渡しが
よくわからなくなるので忘備録。

##今回試したやつ
「子にあるボタンをクリックして、親が持ってるdataを操作」

1. 子に@click="submitOya" ←子供が親に送る言葉
2. methods内に"submitOya"でthis.$emit('close');を記述
3. 親の子タグ内に@close="tojimasu" ←親が子の'close'を受け取り
4. methods内に"tojimasu"で「ドア閉じてー」という内容を記述

##子コンポーネントのボタン
子供側のvue（子コンポーネント）に書いてね。

<button @click="submitOya">子から親へボタン</button>

@click="submitOya" ← ここが親へ送るための記述
クリックしたら"submitOya"を発動してねって意味。
次に子のmethods内に"submitOya"の内容を書く。

.vue

methods:{
　submitOya: function(){
　　this.$emit('close');
　}
}

submitOyaがclickされたら'close'っていう言葉を送ります。
親に向かって、子供が「閉じてねー！」って言ってる感じを想像。
親へ送るときには$emitってやつを使います。※this.を忘れずに！

この時点では子供が親に向かって「閉じてねー(close)！」って言ってるだけなので、
次は親が受け取る準備をします。

##親の受け取り
親側のvue（親コンポーネント）に書いてね。

.html

<kodomo @close="tojimasu"></kodomo>

受けとるには子供の言葉をそのまま使います。
今回は子供が言った'close'に@をつけて、「閉じてー(close)！」が'tojimasu'で親が受け取り。
受け取ると親が"tojimasu"が発動！
次に親のmethods内に"tojimasu"の内容を書く。

.vue

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