Vue.js instance study- 뷰 전역 콤포넌트와 지역 콤포넌트

 

 

 

 

디자인에서도 콤포넌트의 개념을 사용하는데 vue에서도 콤포넌트의 단위를 사용한다. 예전에 html을 배울때 여러 페이지 생성시 js로 헤더와 푸터를 붙이는 작업을 했는데 vue에서도 가능했다.

 

---

Vue.js instance study- 뷰 전역 콤포넌트와 지역 콤포넌트

2021/08/08

 

 

[뷰 컴포넌트]

화면의 영역을 구분하여 개발하고, 콤포넌트 안에 콤포넌트를 넣을 수 있다. 콤포넌트를 사용하여 제작하면 재사용(코드의 반족을 최소화) 할 수 있고, 빠르게 화면을 만들 수 있음.

 

1.새롭게 app이라는 div 정의

2.script를 두개 생성

a.vue 스크립트

b.new Vue 스크립트

3.new Vue 스크립트 안에

엘레멘트인 el을 적고 tag가 app인 div를 선택,

4.open live server하면 Root가 생성된걸 볼 수 있음

*인스턴스를 생성하면 기본적으로 Root 콤포넌트가 됨

 

    <div id="app">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app'
        }

        );
        </script>

 

 

5.전역 콤포넌트 등록해보기

a.기본 콤포넌트 구성

Vue.component('이름',내용);

b. header-1이라는 template 만들어보기

'이름'에 'header-1'을 넣고, 내용에 template를 사용하여 <h1>태그를 사용, 안에다가 쓰고 싶은 내용을 넣으면

        Vue.component('header-1',{
            template: '<h1>Hello</h1>'
        });

c.위의 app div안에 <header-1>태그를 사용해주는것 만으로, h1태그가 적용된 Hello가 화면에 뜸.

        <header-1>
        </header-1>

 

d.화면에서 Root 안에 header-1 콤포넌트가 들어간걸 볼 수 있다!

 

6.활용하기

a.콘텐츠 콤포넌트를 생성해보았다.

        Vue.component('contents-1',{
            template: '<p1>content</p1>'
        });

 

b.위에서 정의한 콤포넌트를 div에 넣어주면 된다.

 

    <div id="app">
        <contents-1></contents-1>
    </div>

 

c.화면에서 확인할 수 있다.

content1이 하위 콤포넌트로 생성되다.

 

 

7.지역 콤포넌트 등록해보기

a.new Vue 안에 다가 콤포넌트를 등록해준다.

구조는 '키':'값'이다.

        new Vue({
            el:'#app',
            component : {
                '키':'값'
            }
        }

 

b.footer-1이라는 콤포넌트를 생성해준다.

*위의 전역 콤포넌트의 구성과 유사하다고 보면 된다.

        new Vue({
            el:'#app',
            components : {
                'footer-1':{
                    template: '<footer>footer</footer>'
                }
            }
        }

 

c.div 안에도 <footer-1>태그를 넣어주면 화면에 표시된다.

 

 

8.전역 콤포넌트와 지역콤포넌트의 차이점

-서비스를 구현할 때 필요한 요소가 여러개이기 때문에, s가 붙음

-지역 콤포넌트는 하단에 어떤 요소가 등록되어있는지 속성으로 확인 가능 (서비스 개발시 계속 등록해나감)

-전역 콤포넌트: 플러그나 라이브러리로 전역으로 사용

**구분해서 사용: 전역은 자동적으로 모든 id의 div에 들어가지만, 지역 콤포넌트로 등록하면 id마다 해당 콤포넌트를 등록해야하는 번거로운 상황이 생긴다.