[Vue] 06. Component의 개념과 기본 사용법

1. Component란?

화면의 구성 요소들을 블록처럼 분리해서 정의한 후, 한 화면을 만들 때 필요한 요소들을 붙여넣기 위해 사용된다.

이때 블럭에 해당하는 것이 Component이다. Vue Component는 Vue Instance이므로 이에 해당하는 속성들과 Life Cycle Hook 모두 사용 가능하다.

 

*단, data는 함수 형식으로 작성해야 한다.

data(){
    return{
        msg:"지역 컴포넌트!",
    }
}

 

 

 

Component 명명 방식

1. Component 이름 = 파스칼(MyComp) | 케밥(my-comp)

2. Component 사용할 때, 태그 명 = 케밥(my-comp)

*Component이름을 파스칼형식으로 작성할 경우, 대문자를 기준으로 잘라 케밥으로 전환하여 태그명이 정해짐

 

 

 

2. 전역 컴포넌트

특정 Vue에만 한정되지 않고, 여러 Vue 영역에 적용할 수 있는 컴포넌트다.

 

 

1. 형식

Vue.component('component이름', {options});

 

 

2. 활용

1) component 생성

2) Vue로 관리할 영역 설정

<div id="app">
    <global-comp></global-comp>
</div>
<div id="app2">
    <global-comp></global-comp>
</div>

<script>
    Vue.component("GlobalComp", {
        template:`<div>{{msg}}</div>`,
        data(){
            return {
                msg: "hello, 전역 컴포넌트!"
            }
        }
    });

    new Vue({
        el: "#app",
    })
    new Vue({
        el: "#app2",
    })
</script>

 

 

 

3. 지역 컴포넌트

Vue생성 시 정한 영역, 즉 특정 영역에만 적용 가능한 컴포넌트다.

 

 

1. 형식

id값 이하에 있는 element들에만 component를 적용할 수 있다.

new Vue({
    el: "#id값",
    components:{
        "component이름":{
            options
        }
    }
});

 

 

2. 활용

Vue가 관리할 영역을 설정하고, 그 Vue 속성으로 component를 가진다.

<div id="app">
    <local-comp></local-comp>
</div>

<script>
    new Vue({
        el: "#app",
        components:{
            "LocalComp":{
                template:`<div>{{msg}}</div>`,
                data(){
                    return{msg:"지역 컴포넌트!",}
                }
            }
        }
    })
</script>