-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
Vue 컴포넌트 사용법
22.04.03 13:33 작성 조회수 284
1
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>
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2022.04.03
안녕하세요, 컴포넌트 등록 코드가 잘못 되어 있네요.
<app-content>
<app-header></app-header>
</app-content>위 형태가 아니라 app-content의 템플릿 코드에 <app-header></app-header>를 등록해 주셔야 합니다 :)
답변 1