props 넘겨주고 vue 개발자 도구에서 확인했을 때 질문합니다.

Question

안녕하세요! 강의 듣다가 질문 드립니다. 강의에서 props를 하위 컴포넌트로 전달하고 뷰 개발자 도구로 확인했을 때, 하위 컴포넌트에서 'propsData'라는 이름의 속성과 'hi'라는 속성 값이 보이는 것을 봤습니다. 따라서 실습해봤는데, 저는 좀 다르게 보여서 질문 드립니다. props란에 'propsData'라는 이름의 속성값이 undefined라고 되어 있고, 밑에 $attrs란에 강의랑 같이 나옵니다. 왜 저는 props란에는 undefined라고 뜨고 $attrs란에 나오는 것인지 궁금합니다. 코드와 사진 같이 첨부합니다. [코드] < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document < body > < div id = " app " > < app-header v-bind:propsData = " message " > < script src = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > < script > const appHeader = { template : '

header

' , props : [ ' propsData ' ] } const vm = new Vue ( { el : ' #app ' , components : { ' app-header ' : appHeader }, data : { message : ' hi ' } } ) [강의 캡쳐] [제 화면 캡쳐]

캡틴판교 · Answer

안녕하세요 경림님, 질문을 위해 자료들을 열심히 첨부해 주셔서 감사합니다 :) 아마 이 강의 또는 이후 강의에서 안내를 할텐데요. 프롭스 속성은 자바스크립트에서 propsData로 쓰시면 HTML에서는 케밥 케이스인 props-data로 써주셔야 합니다. 이유는 HTML 속성이 대소문자 구분이 안되어서 그렇습니다 :)