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の足がかり！