Vue コンポーネント親子関係編 -第2章- ~関係を制覇しろ!~

親子関係(親子コンポーネント)

テンプレートで他のコンポーネントを使用すると親子関係になる。
propsカスタムイベントを使用する。

コンポーネント→子コンポーネント

データバインディングで親のデータを子コンポーネントが使用できる。
props downというデータフロー

親
<child v-bind:val="test">
子
Vue.component('child'.,{
  props:['val']
})


注意
propsで受け取った値を子コンポーネント側から変更することはできない。
もし変更した場合は、算出プロパティを使用して新たなデータとして定義する。
また子コンポーネント側から元のデータ自体に変更する場合は$emitを使用することができる。

受け取りデータの指定
propsでは受け取り型(Stringなど)の指定が推奨されており、指定の型以外の場合は警告をだす。
またデフォルト値や必須項目を定義できる。

コンポーネント→親コンポーネント

コンポーネントから親コンポーネントに変更をする場合や、
データを渡す場合は カスタムイベントと、インスタンスメソッドの$emitを使用する。
event upというデータフロー

親
<child v-on:test-event="method"> ->test-eventが発生したらmethodを呼び出す。
子
this.$emit('test-event')


親が子コンポーネントのイベントを認識する
1.v-onディレクティブ(@で省略可能)で子のイベントをハンドルする。
2.$emitでトリガーする。


親子コンポーネントの色々

非親子コンポーネント
親子以外のコンポーネント間ではVueインスタンスイベントバスとして使用する。
ただ複雑化した場合、Vuexの導入を検討した方が良い。

var bus_test = new Vue()
bus_test.$emit('bus_test')
bus_test.$on('test-event',function(){
 //test-eventが発火した際の処理
//thisはbus_testのインスタンス
})



コンポーネントを参照する
親が子のメソッドを使用したい場合に$refsを使用する。

次回

コンポーネントの制覇! SPAの足がかり!

参照文献

基礎から学ぶ Vue.js
https://www.amazon.co.jp/基礎から学ぶ-Vue-js-mio/dp/4863542453/