-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
컴포넌트 여러개 생성했음에도 모두 그려지지 않는 현상에 대해 질문 드립니다!
22.07.02 18:30 작성 조회수 278
1
안녕하세요, 장기효님 덕분에 강의 잘 수강하고 있습니다!
수강 중 궁금한점이 있어서 글을 남깁니다.
app-content가 뷰에 그려지지않아 이유를 찾다가 app-header컴포넌트를 셀프클로징을 풀어주니 app-content가 그려지는것을 발견했습니다.
컴포넌트는 셀프클로징을 하면 안되는것일까요?
아니면 제 코드에 다른 문제가 있는 것일까요?
뷰가 그려지지 않는 코드를 첨부드립니다.
(이 상황에서 app-header의 셀프클로징을 수정해주면 정상으로 뷰가 그려집니다. )
<body>
<div id="app">
<app-header v-bind:propsdata="message"/>
<app-content />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: "<h1>header : {{propsdata}}</h1>",
props: ["propsdata"],
};
var appContent = {
template: "<div>content</div>",
};
new Vue({
el: "#app",
components: {
"app-header": appHeader,
"app-content": appContent,
},
data: {
message: "hi!!",
num: 100,
},
});
</script>
</body>
추가) '같은 컴포넌트 레벨 간의 통신 방법 구현 1'을 듣던중 셀프클로징을 사용하지 않았는데도 위와 비슷한 현상이 일어나서 추가합니다!
elements탭이나 vue탭에서 보아도 app-header 컴포넌트만 나타나고 app-content 컴포넌트는 나오지 않습니다. 이 상황에서 app-header컴포넌트를 주석처리하면 app-content컴포넌트가 보이는데 무엇이 잘못된 것일까요?
코드를 첨부드립니다!
<body>
<div id="app">
<app-header></appHeader>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: "<h1>header</h1>",
};
var appContent = {
template: "<div>content<button>passNumber</button></div>",
};
new Vue({
el: "#app",
components: {
"app-header": appHeader,
"app-content": appContent,
},
});
</script>
</body>
vue생성자 함수를 찍어보니 components안에 두 컴포넌트가 모두 잘 생성되어있는것 같습니다.
- elements탭에서는 header만 보입니다. (vue탭도 header만 보입니다ㅜ)
답변을 작성해보세요.
1
장기효(캡틴판교)
지식공유자2022.07.05
안녕하세요 좋은 질문이네요. 위에 sedin님이 남겨주신 것처럼 싱글 파일 컴포넌트 체계가 아닐 때는 self closing 태그를 사용하시면 안됩니다 :)
1
sedin
2022.07.04
저도 궁금해서 찾아보니 Vue Style Guide 공식 문서에 이렇게 나오네요
https://v2.vuejs.org/v2/style-guide/?redirect=true#Self-closing-components-strongly-recommended
0
답변 3