Vue.js 구성 요소 간의 통신 [클래스 속성, id 속성의 교차]

입문

이어서며칠 전 보도
구성 요소 간의 통신을 총괄하다.이번에는 구성 요소를 호출할 때 id 속성과 클래스 속성이 어떤 행동을 하는지 조사했습니다.

완성 코드

* 보기 쉽도록 바디 태그만 쓰십시오.
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".
그럼 이번에는 컴-칠드를 보러 갑시다.
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 속성은 부모 구성 요소에 부여된parent를 덮어씁니다. 구성 요소에서child이지만 클래스 속성에 적용됩니다.
comp-child에 대해 html에서 똑같이 정의하면 처리 내용은 my-component의template와 같기 때문에 설명을 생략합니다.
끝까지 읽어줘서 고마워요.
주의:props를 사용하여 id 속성과 클래스 속성을 전달하지 않습니다.