【Vue.js】親子間のcomponentで通信をしたい - Laravelとねころっけくん5.8

component間で通信をするには、

の3つの手段があります。

以下に紹介するのは、 propsとカスタムイベントを使用した親子間の通信です。

以下のようにVue.componentの中で他のcomponentを使用した場合、

という関係となります。

Vue.component('my-component', {
　template: '<p><child-component></child-component></p>'
});

また余談ですがVue.jsでは以下のようにタグが2つに分かれているとエラーと判断されます。

Vue.component('my-component', {
　template: '<p></p><child-component></child-component>'
});

2つ以上のタグを用いる場合には、必ず全体を囲むタグを設定して1つの包括的なタグのまとまりを作りましょう。

See the Pen
eqdPEm by りっしー (@hiwriterprogram)
on CodePen.

上のコードでは、親componentのtemplateの中にcomp-childを設置して、実質上親子関係となっています。

親componentのtemplateの中で属性valをセットしていることがわかります。

  template: '<p><comp-child val="これは子A"></comp-child><comp-child val="これは子B"></comp-child></p>'

そして、子componentでは親componentが設定した属性をpropsという項目で受け取っています。

  props: ['val']

また、子componentのtemplateではvalを{{}}タグで出力することによってhtmlに出力されていることが分かります。

template: '<p>{{ val }}</p>',

親から子へのデータの受け渡しはvalを含めた属性で行われます。

他の属性も同じく親componentで設定する属性値と、子componentのpropsで受け取りができるため、

//親componentのtemplate
<comp-child val="これは子A" style="font-size: 20px;">

//子componentのprops
props: ['val','style']

//子componentのtemplate
template: '<p style="{{style}}">{{ val }}</p>'

とすることでstyle属性が渡っていることが分かります。

こちらは少し難しいかもしれません。
これまでと違う点としては

の2点です。