はじめに

先日の記事に引き続き、
コンポーネント間の通信についてまとめます。今回はコンポーネントを呼び出す際に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は使っていません。