Written by 최태열
on January 25, 2021

Vue Component

component

다수 사용되는 UI를 component로 정의하여 재사용하는 방법이다.

query 문으로 구현

<div id="app1-1">
    <!--우리가 직접 개발하는 tag를 사용(사용자 정의 tag -> component)-->
    <g-com></g-com>
    <l-com></l-com>
</div>

<div id="app1-2">
    <g-com></g-com>
</div>

<script>
    // 전역 컴포넌트
    // Vue.component("tag명", (tag의 내용));
    Vue.component('g-com', {
        template:   `<div>
                        전역 컴포넌트 - 다양한 html로 구성이라 간주
                        <button onclick="alert(1)">클릭</button>
                    </div>`
    });

    new Vue({
        el: "#app1-1",
        components: {
            'l-com' : {
                template: `<div>로컬 컴포넌트</div>`
            },
        }
    })

    new Vue({
        el: "#app1-2",
    })
</script>

따로 component로 선언할 경우 모든 vue 객체에서 사용할 수 있다.

vue 객체 안에 선언한 경우 해당 객체만 사용할 수 있다.

template으로 구현

<template id="btnCom"> 
    <div>
        <button>btn1</button>
        <button>btn2</button>
        <button>btn3</button>
        <button>btn4</button>
        <button>btn5</button>
    </div>
</template>

<div id='app2'>
    <btn-com></btn-com>
</div>

<script>
    Vue.component('btn-com', {
        template: '#btnCom'
    });
    
    new Vue({
        el: '#app2'
    })
</script>

template으로 구현하고 id를 기준으로 component에 지정해 사용할 수 있다.

Discussion and feedback

← → Top