props 넘겨주고 vue 개발자 도구에서 확인했을 때 질문합니다.
방경림
9일 전
안녕하세요! 강의 듣다가 질문 드립니다.
강의에서 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>
[강의 캡쳐]
[제 화면 캡쳐]