Vue 컴포넌트 사용법

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>

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