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

Lia

작성한 질문수

Vue.js 시작하기 - Age of Vue.js

[실습 안내] props 속성 실습

컴포넌트 여러개 생성했음에도 모두 그려지지 않는 현상에 대해 질문 드립니다!

작성

526

안녕하세요, 장기효님 덕분에 강의 잘 수강하고 있습니다!

수강 중 궁금한점이 있어서 글을 남깁니다.

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안에 두 컴포넌트가 모두 잘 생성되어있는것 같습니다.