Vue 컴포넌트 사용법
463
작성한 질문수 25
Component 사용법에 대해 질문 드립니다.
현재 아래와 같이 코드를 작성하였습니다.
이 때 header, content, footer의 순서로 객체를 생성하였고,
header는 app-header로 전역 등록
content는 app-content라는 전역 등록
local_header는 local-header라는 이름으로 지역 등록
footer는 app-footer라는 이름으로 지역등록 하였으며, 이 때 footer 객체에는 components 프로퍼티를 주어서, local-header라는 이름의 컴포넌트를 사용하고자 하였습니다.
이 때 드는 의문점
1. 전역 컴포넌트는 어떤 컴포넌트에서도 접근가능하다고 하였는데, 아래의 코드를 보면 전역 등록한 app-content 컴포넌트 하위로 app-header 컴포넌트를 사용하고 있습니다. 하지만 렌더링 결과에는 app-content안에 app-header가 뜨지 않습니다. 개인적으로 template 속성이 의미가 있는거 같은데, 어떤 의미가 있을까요...
2. 지역 컴포넌트는 하위 컴포넌트에서는 상위를 접근하지 못하고, 상위는 하위를 사용할 수 있다고 들었습니다. 하지만 전역과 마찬가지로 지역 등록한 app-footer에서 local-header를 사용하려고 태그를 하위로 넣으면 local-header의 렌덩링이 안됩니다.
결국 궁극적으로 컴포넌트를 어떻게 재사용할 수 있는건지 궁금합니다. 재사용하려면 컴포넌트 안에 컴포넌트를 밀어 넣을 수도 있어야할텐데, 어떻게 하는지 모르겠네요....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-content>
<app-header></app-header>
</app-content>
<app-footer>
<local-header></local-header>
</app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//전역 등록
var header = {
template: '<h1>Header</h1>'
}
//지역 등록
var local_header = {
template: '<h1>Local Header</h1>'
}
//지역 등록
var footer = {
template: '<footer>footer</footer>',
components: {
'local-header' : local_header
}
}
//전역 등록
var content = {
template : '<div>content</div>'
}
Vue.component('app-header',header);
Vue.component('app-content',content);
new Vue({
el: '#app',
components: {
'app-footer' : footer,
'local-header': local_header
}
});
</script>
</body>
</html>답변 1
0
안녕하세요, 컴포넌트 등록 코드가 잘못 되어 있네요.
<app-content>
<app-header></app-header>
</app-content>위 형태가 아니라 app-content의 템플릿 코드에 <app-header></app-header>를 등록해 주셔야 합니다 :)
개발자 툴에서 Vue가 표시되지 않는 현상.
0
93
2
chrome 확장 devtools 버전 문제
0
81
1
Vue.js not detected가 자꾸 뜹니다
0
84
2
마지막 강의가 안되요
0
57
1
data, computed, watch > Reactivity
0
52
1
f12누르고 개발자도구에 vue 탭이 안생겨요
0
89
1
vue composition api
0
74
1
강의 자료 다운이 될까요?
0
128
1
개발자 도구에서 뷰탭이 안보여요....
0
590
3
프롭스 데이터 질문입니다.
0
113
1
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
0
141
1
화면이 안떠요,, 이전 이후 강의는 뜨는데..
0
236
6
크롬 확장 프로그램 vue devtools 설치했는데
0
537
2
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
0
243
1
버튼을 클릭해도 event가 발생하지 않습니다.
0
310
1
vue3 css 경로 표시 문의
1
231
2
개발자도구 vue탭
0
356
1
화면 코드 보기
1
226
2
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
1
385
2
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
1
889
2
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
1
288
2
뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요
1
401
2
다음 단계 강의는...?
1
387
2
버튼을 눌러도 data의 값이 변경되지 않습니다
1
277
2