• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

21.01.17 13:21 작성 조회수 213

1

안녕하세요! 강의 듣다가 질문 드립니다.

강의에서 props를 하위 컴포넌트로 전달하고 뷰 개발자 도구로 확인했을 때, 하위 컴포넌트에서 'propsData'라는 이름의 속성과 'hi'라는 속성 값이 보이는 것을 봤습니다.

따라서 실습해봤는데, 저는 좀 다르게 보여서 질문 드립니다. props란에 'propsData'라는 이름의 속성값이 undefined라고 되어 있고, 밑에 $attrs란에 강의랑 같이 나옵니다. 왜 저는 props란에는 undefined라고 뜨고 $attrs란에 나오는 것인지 궁금합니다.

코드와 사진 같이 첨부합니다.

[코드]

<!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">
<app-header v-bind:propsData="message"></app-header>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appHeader = {
template: '<h1>header</h1>',
props: ['propsData']
}

const vm = new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data: {
message: 'hi'
}
})
</script>
</body>
</html>

[강의 캡쳐]

[제 화면 캡쳐]

답변 1

답변을 작성해보세요.

0

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