はじめに
今回はVue.jsのコンポーネント間の通信を自分なりにまとめていきます。
私はVue.jsの参考書で評判が高い基礎から学ぶVue.jsを読みながら学んでいるのですが私にとっては少し難しく、忘備録をつけておかないと後々、また分からなくなりそうなので今回、qiitaにまとめました。
今回もVScodeを使っていきます。
コンポーネントとは
企業などのwebページは見てもらうとわかりますがヘッダー、フッター、サイドバーなどいくつかのパーツから成り立っています。これらのパーツはどのページでも同じ物を使っていることが多く、一つ一つのページに同じコードを書くのは面倒です。そんな時に各パーツをコンポーネントに格納し、共有化することで開発、メンテナンスの効率が上がります。
完成コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" class='box'>
<my-component></my-component>
<comp-child></comp-child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
Vue.component('my-component',{
template:'<p><comp-child v-bind:val="message"></comp-child></p>',
data:function(){
return{
message:'コンポーネント'
}
},
props:['val']
})
Vue.component('comp-child',{
template:'<p>{{message}}{{val}}</p>',
data:function(){
return{
message:'コンポーネント２'
}
},
props:['val']
})
new Vue({
el:'#app',
data: {
}
})
実行結果
解説
以下のコードに注目してください。Vueインスタンスでマウントしたdivタグ内に、<my-component v-bind:val="message"></my-component>と<comp-child></comp-child>があります。このタグ内に記述されているmy-componentとcomp-childがコンポーネントの名前です。
<div id="app" class='box'>
<my-component></my-component>
<comp-child></comp-child>
</div>
このコンポーネントの中身をVue.jsで定義していきます。
下記を見てください。
Vue.component('my-component',{
template:'<p><comp-child v-bind:val="message"></comp-child></p>',
data:function(){
return{
message:'コンポーネント'
}
},
props:['val']
})
Vue.component('comp-child',{
template:'<p>{{message}}{{val}}</p>',
data:function(){
return{
message:'コンポーネント２'
}
},
props:['val']
})
定義内容がどのようになっているか見てみましょう。
Vue.component('コンポーネント名'{
template:'htmlに描画する内容',
data:function(){
return{
プロパティ：データ
}
},
props:[親コンポーネントから受け取った値]
})
コンポーネント名・・・html内でタグで呼び出すとtemplateが描画される。
template・・・html内に描画する内容。要素は単一でなければならない。
data・・・vueインスタンス内のdataと比べると関数で返していることに注意。
props・・・親コンポーネントから受け取ったデータ
comp-childを見てみよう
<comp-child></comp-child>
html内でコンポーネント呼び出し。
Vue.component('comp-child',{
template:'<p>{{message}}{{val}}</p>',
data:function(){
return{
message:'コンポーネント２'
}
},
props:['val']
})
template内のpタグに{{message}}があるのでdata内のmessageプロパティのデータを描画しています。{{val}}はprops内のvalを見ていますがval内には何もデータがないので
実行結果の通り、コンポーネント2のみ出力されています。
my-componentを見てみよう
<my-component></my-component>
先ほどと同じようにコンポーネントを呼び出しています。
Vue.component('my-component',{
template:'<p><comp-child v-bind:val="message"></comp-child></p>',
data:function(){
return{
message:'コンポーネント'
}
},
props:['val']
})
html内でコンポーネントが呼び出されたのでtemplateを描画していますが注目していただきたいのがcomp-childコンポーネントをさらに呼び出していることです。なのでmy-componentを呼び出すと同時にcomp-childも呼んでいることになります。さらにv-bind:val="message"でdata内のmessageプロパティを使ってcomp-childにデータを渡しています。
そこで呼び出されたcomp-childコンポーネントをもう一度見返してみると
Vue.component('comp-child',{
template:'<p>{{message}}{{val}}</p>',
data:function(){
return{
message:'コンポーネント２'
}
},
props:['val']
})
propsのvalで先ほど渡したデータを受け取ってtemplate内で{{ val }}として使っています。結果、実行するとcomp-childとmy-componentのデータがどちらも表示されました。
最後に
一見難しそうですが自分でコードを書いてみるとシンプルな作りで非常にわかりやすいと思います。
やはり基本ですがプログラミングの勉強はひたすら手を動かすことが大事だなと思いました。
これを読んでくださった方もコードをコピペして自分で動かしてみることをお勧めします。
補足
上記で紹介した本について基礎と書かれていますが内容は初めて聞く単語が多く、
初級者には難しいと思います。オンラインの動画で基礎を軽く勉強されてから購入されることをおす勧めします。