vue.js components 뷰 컴포넌트 사용 , 개념

컴포넌트 란 ?

[ 화면을 구성할 수 있는 블록을 말한다. 컴포넌트를 활용하면 화면을 빠르게 구조화 할 수 있으며, 일괄적인 패턴으로 코드를 개발 할 수있다, 또한 코드를 재사용 할 수 있다]

 

그럼 vue.js 에서 컴포턴트란..?

vue js에서는 가장 강력한 기능 중 하나이다. 🔥

element 를 확장하여 재사용 가능 한 코드를 캡슐화 하는 데 도움을 준다.

상위 수준에서 컴포넌트는 vue 의 compile 컴파일러 에 의해 동작이 추가 된 사용자 지정 엘리먼트이다.

경우에 따라 특별한 is 속성으로 확장된 원시 html element 로 나타 낼 수도 있다.

 

 

vue.js Component 생성 

2가지가 있다. 

1. 전역 global component :

공통적으로 모든 범위의 여러  인스턴스에서  사용할 수 있는 컴포넌트이다.

모든 범위에서 사용이 가능하다 

 

2. 지역 local component 특정 인스턴스에서만 유효 범위를 가진다.

 

vue.js component 등록 방법 

 

vue.componenet('이름', '옵션') 이렇게 호출해야한다.

이름: 이 컴포넌트를 사용하기 위한 이름

옵션: 컴포넌트 렌더링 시 필요한 옵션 작성 

 

1. 전역 컴포넌트 등록하는 방법

√

전역 컴포넌트 등록 

Vue.component('component Name', 'option'){
// componenet stuff 
});

컴포넌트 이름은 template 속성에서 사용할 html 정의 태그 

컴포넌트 내용에는 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성하고

template , data , methods 등 인스턴스 옵션 속성을 정의할 수 있습니다.

Vue.component() 로 전역 컴포넌트 1개를 등록 

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            Vue.component('my-component', {
                template: '<div>전역 component.</div>'
            });
        </script>

2.↘ 지역 컴포넌트 등록 방법

전역 과 다르게 인스턴스에 components 에 속성을 추가하고 등록할 

컴포넌트 이름과 내용을 정의 한다.

 

new Vue({
         componenets ; {
                 'components Name': 컴포넌트 내용
       }
        });

js 에서

<script>
    var cmp = {
        // 컴포넌트 내용
        template: '<div>지역 컴포넌트입니당당.</div>'
    };

    new Vue({
        el: '#app',
        components: {
            'components 지역': coco peach 
        }
    });
</script