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

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

강의에서 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>

[강의 캡쳐]

[제 화면 캡쳐]

인프런 커뮤니티 질문&답변

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