컴포넌트 여러개 생성했음에도 모두 그려지지 않는 현상에 대해 질문 드립니다!
536
작성한 질문수 2
<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만 보입니다ㅜ)
답변 3
1
저도 궁금해서 찾아보니 Vue Style Guide 공식 문서에 이렇게 나오네요
https://v2.vuejs.org/v2/style-guide/?redirect=true#Self-closing-components-strongly-recommended
개발자 툴에서 Vue가 표시되지 않는 현상.
0
122
2
chrome 확장 devtools 버전 문제
0
104
1
Vue.js not detected가 자꾸 뜹니다
0
107
2
마지막 강의가 안되요
0
70
1
data, computed, watch > Reactivity
0
58
1
f12누르고 개발자도구에 vue 탭이 안생겨요
0
107
1
vue composition api
0
77
1
강의 자료 다운이 될까요?
0
141
1
개발자 도구에서 뷰탭이 안보여요....
0
617
3
프롭스 데이터 질문입니다.
0
119
1
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
0
147
1
화면이 안떠요,, 이전 이후 강의는 뜨는데..
0
255
6
크롬 확장 프로그램 vue devtools 설치했는데
0
558
2
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
0
249
1
버튼을 클릭해도 event가 발생하지 않습니다.
0
320
1
vue3 css 경로 표시 문의
1
241
2
개발자도구 vue탭
0
361
1
화면 코드 보기
1
235
2
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
1
392
2
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
1
905
2
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
1
293
2
뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요
1
403
2
다음 단계 강의는...?
1
389
2
버튼을 눌러도 data의 값이 변경되지 않습니다
1
286
2