[Vue.js] 컴포넌트

📝 컴포넌트

• 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)
• 전역 컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있다.
• 지역 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 갖는다.

전역 컴포넌트

• 등록방법

Vue.component('컴포넌트이름', {
    // 내용
});

• 예제

<div id="app">
    <button>컴포넌트 등록</button>
    <my-component></my-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('my-component', {
       template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
    });

    new Vue({
        el: '#app'
    })

</script>

• 인스턴스가 화면에 적용되는 과정
  1. 뷰 라이버리 파일 로딩
  2. 뷰 생성자로 컴포넌트 등록 Vue.component()
  3. 인스턴스 객체 생성(옵션 속성 포함)
  4. 특정 화면ㅇ 요소에 인스턴스 부착
  5. 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환)
  6. 변환된 화면 요소를 사용자가 최종 확인

지역 컴포넌트

- 인스턴스에 Components 속성을 추가하고 등록할 때 컴포넌트 이름과 내용을 정의하면 된다.

new Vue({
    components: {
        '컴포넌트 이름': 컴포넌트 내용
    }
})

• 예제

  <div id="app">
    <button>컴포넌트 등록</button>
    <my-local-component></my-local-component>
  </div>
  

 

전역과 지역 컴포넌트의 차이점

<div id="app">
    <h3>첫 번째 인스턴스</h3>
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>

<div id="app2">
    <h3>두 번째 인스턴스</h3>
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //전역 컴포넌트
    Vue.component('my-global-component', {
        template: '<div>전역 컴포넌트</div>'
    });

    //지역 컴포넌트
    let cmp = {
       template: '<div>지역 컴포넌트가 등록되었습니다.!</div>'
    }

    new Vue({
        el: '#app',
        //지역 컴포넌트 등록
        components: {
            'my-local-component': cmp
        }
    })

    new Vue({
        el: '#app2'
    })
</script>

 

• 두 번째 인스턴스 영역에 my-local-component가 표시되지 않았다.