はじめに
先日の記事に引き続き、
コンポーネント間の通信についてまとめます。今回はコンポーネントを呼び出す際にid属性とクラス属性を付与するとどんな挙動になるのか調べました。
完成コード
*見やすさ考慮してbodyタグの中しか書きません。
index.html
<div id="app" class='box'>
<p>my-componentの呼び出し</p><my-component></my-component>
<hr>
<p>comp-childの呼び出し</p><comp-child id="parent" class="parent"></comp-child>
</div>
次にJSです。
main.js
Vue.component('my-component',{
template:'<p><comp-child id="parent" class="parent" v-bind:val="message"></comp-child></p>',
data:function(){
return{
message:'my-component'
}
},
props:['val']
})
Vue.component('comp-child',{
template:'<p id="child" class="child">{{message}}/{{val}}</p>',
data:function(){
return{
message:'child-comp'
}
},
props:['val']
})
new Vue({
el:'#app',
data: {
}
})
実行結果
child-comp/my-componentとchild-compを出力しているPタグ内のid属性とclass属性に注目しておいてください。
解説
my-componentの呼び出しから辿っていきましょう。
index.html
<p>my-componentの呼び出し</p><my-component></my-component>
html内で普通に記述しています。そして呼び出されたコンポーネントの中身を見ます。
main.js
Vue.component('my-component',{
template:'<p><comp-child id="parent" class="parent" v-bind:val="message"></comp-child></p>',
data:function(){
return{
message:'my-component'
}
},
props:['val']
})
template:'<p><comp-child id="parent" class="parent" v-bind:val="message"></comp-child></p>'に注目です。
comp-childを呼び出す際にid="parent" class="parent" を付与しています。
そこで今度はcomp-childを見ていきましょう。
main.js
Vue.component('comp-child',{
template:'<p id="child" class="child">{{message}}/{{val}}</p>',
data:function(){
return{
message:'child-comp'
}
},
props:['val']
})
今度はtemplate内のPタグ内で<p id="child" class="child">{{message}}/{{val}}</p>'と別のid属性とクラス属性を指定しています。
すると結果、、、
id属性はコンポーネント内でchildとしているにも関わらず親コンポーネント内で付与したparentに上書きされ、クラス属性についてはどちらも適用されました。
comp-childについては、html内で同様に定義すると処理内容はmy-componentのtemplateと同じ動きをするため、説明は省略します。
最後まで読んでいただきありがとうございました。
追記：id属性とクラス属性の引き渡しについてはpropsは使っていません。