프로그래밍 노트/Vue

뷰(Vue) 컴포넌트(Component)

깡냉쓰 2019. 9. 24. 23:46
728x90
반응형

컴포넌트(component)란 조합하여 화면을 구성할 수 있는 블록을 의미
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리함.

컴포넌트 등록하기

  1. 전역(Global) : 여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트
  2. 지역(Local) : 특정 인스턴스에만 유효한 범위를 갖음

전역 컴포넌트 등록

라이브러리 로딩 후 Vue 변수를 이용하여 등록

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

컴포넌트 이름
⇒ template 속성에서 사용할 HTML 사용자 정의 태그(custom tag)
컴포넌트 내용
⇒ 컴포넌트 태그가 실제 화면의 HTML요소로 변환할 때 표시될 속성들을 컴포넌트 내용에 작성 (template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있음)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Sample</title>
</head>
<body>
<div id="app">
    <button>컴포넌트 등록</button>
    <my-component></my-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
    Vue.component("my-component", {
        template : "<div>전역 컴포넌트가 등록되었습니다.</div>"
    });

    new Vue({
        el : "#app"
    })
</script>
</body>
</html>
  1. 뷰 라이브러리 파일 로딩
  2. 뷰 생성자로 컴포넌트 등록 Vue.component()
  3. 인스턴스 객체 생성
  4. 특정 화면 요소에 인스턴스 부착
  5. 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환)
  6. 변환된 화면 요소를 사용자가 최종 확인

지역 컴포넌트 등록

인스턴스에 components속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의

new Vue({
        components : {
                    "컴포넌트 이름" : 컴포넌트 내용
        }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Sample</title>
</head>
<body>
<div id="app">
    <button>컴포넌트 등록</button>
    <my-local-component></my-local-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
    var cmp = {
        template : "<div>지역 컴포넌트가 등록되었습니다.</div>"
    };

    new Vue({
        el : "#app",
        components : {
            "my-local-component" : cmp
        }
    })
</script>
</body>
</html>

지역 컴포넌트와 전역 컴포넌트의 차이

유효범위의 차이

<div id="app">
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>
<div id="app2">
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>
<script>
        Vue.component("my-component", {
        template : "<div>전역 컴포넌트가 등록되었습니다.</div>"
    });
        var cmp = {
        template : "<div>지역 컴포넌트가 등록되었습니다.</div>"
    };

    new Vue({
        el : "#app",
        components : {
            "my-local-component" : cmp
        }
    });

        new Vue({
        el : "#app2",

    })
</script>

app2영역에서는 local compnent를 찾을 수 없다.

728x90
반응형