[Vue.js] 컴포넌트 (component)

전역 컴포넌트

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

플러그인이나 라이브러리처럼 전역으로 사용할 때 사용하게 된다. 인스턴스가 생성될 떄 마다 따로 등록해 줄 필요가 없다.

 

       // Vue.component('컴포넌트 이름', '컴포넌트 내용');
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });

컴포넌트 작성 후 화면에 반영하기 위해서는 태그 안에 컴포넌트 태그(컴포넌트 이름)를 추가하면된다. 

 

 <div id="app">
        <app-header></app-header>
        <!-- <app-content></app-content> -->
        <app-footer></app-footer>
 </div>

 

지역 컴포넌트

대체로 서비스 코드에서 많이 사용하게 되며, 인스턴스가 생성될 떄 마다 새로 등록해줘야한다. 

new Vue({
            el:'#app',
            components:{
                // '키(컴포넌트 이름)' :'value(컴포넌트 내용)';
                'app-footer': {
                    template :'<footer>footer</footer>'
                }
                
            }
        });
        
        //app을 id로 가진 태그에 인스턴스를 붙임

 <div id="app2">

        <app-header></app-header>
        <!-- <app-content></app-content> -->
        <app-footer></app-footer>
        <!-- appheader는 뜨는데 footer는 뜨지 않음 -->
    </div>

컴포넌트 통신방식 

각각의 컴포넌트는 각각의 데이터를 관리한다. 각각의 데이터를 공유하기 위해서는 규칙을 따라야한다 

 

 

 

n방향 통신의 경우 버그 추적의 어려움 등의 문제가 생기기 때문에 데이터 흐름 추적이 쉽도록 통신 규약을 만들어 지킨다.