Vue 3 Component

Component

 

• 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.
• 컴포넌트를 등록하는 방법은 전역(Global) 방식과 지역(Local) 방식의 두 가지가 있다.
• 지역 컴포넌트는 특정 인스턴스에서만 유효하고 전역 컴포넌트는 모든 범위의 여러 인스턴스에서 공통으로 사용할 수 있다.
• 컴포넌트의 이름은 알파벳 소문자와 숫자, 하이픈(-)만 포함하는 것이 원칙이고 알파벳으로 시작해야 한다.
• 컴포넌트 내의 data는 반드시 함수여야 한다.

 

Global (전역)

 

<div id="vm1">
    <global-comp class="style1"></global-comp>
</div>

<script>
    const vm1 = Vue.createApp({});
    vm1.component('globalComp',{
        template: '<p>안녕하세요????</p>'
    }).mount('#vm1');
</script>

 

 

Local (지역)

 

<div id="vm2">
    <local-comp class="style1"></local-comp>
</div>

<script>
    const vm2 = Vue.createApp({
        components: {
            'localComp' : {
                template: '<p>반갑습니다.</p>'
            }
        }
    }).mount('#vm2');
</script>

 

 

Props

 

• props는 컴포넌트에서 전달되는 속성의 값을 말하며 문자열이지만 객체의 배열 형식으로 되어있다.
• HTML 속성은 대소문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때 camelCased props, 이름을 사용할 때 kebab-case를 사용해야 한다.

<div id="vm3">
    <mycomp1 comp-att="감사합니다."></mycomp1>
</div>
<script>
    const vm3 = Vue.createApp({});
    vm3.component('mycomp1',{
        template: '<p>{{compAtt}}</p>',
        props: ['compAtt']
    }).mount('#vm3');
</script>

• Vue 3 인스턴스의 data 전달

<div id="vm4">
    <call-data></call-data>
    <counter></counter>
</div>

<script>
    const dex = {msg:'잘가~',n:10};
    const vm4 = Vue.createApp({});
    vm4.component('callData',{
        template: '<p>{{msg}}</p>',
        data: function(){
            return dex
        }
    });
    vm4.component('counter',{
        template: '<button v-on:click="n++">{{n}}</button>',
        data(){
            return dex;
        }
    });
    vm4.mount('#vm4');
</script>

• v-bind + props 활용

<div id="vm6">
    <mycomp2 :comp1-num="num1"></mycomp2>
    <mycomp3 :comp2-num="num2"></mycomp3>
</div>

<script>
    const vm6 = Vue.createApp({
        data(){
            return{
                num1: 100,
                num2: 200
            }
        }
    });
    vm6.component('mycomp2',{
        props: ['comp1Num'],
        template:`<p>첫 번째 숫자 : {{comp1Num}}</p>`
    });
    vm6.component('mycomp3',{
        props: ['comp2Num'],
        template:`<p>첫 번째 숫자 : {{comp2Num}}</p>`
    });
    vm6.mount('#vm6');
</script>

• for 활용

<div id="vm5">
    <h3>{{web}}</h3>
    <web></web>
    <h3>{{dtp}}</h3>
    <dtp></dtp>
    <h3>{{art}}</h3>
    <art></art>
</div>

<script>
    const depart = {sbsweb:'웹학과',sbsdtp:'광고편집학과',sbsart:'아트웍학과'};
    const subject = {
        webs: [
            {name:'웹1', content:'HTML+CSS 기초'},
            {name:'웹2', content:'HTML+CSS 고급'},
            {name:'웹3', content:'HTML+CSS 활용'},
            {name:'웹4', content:'jQuery'},
            {name:'웹5', content:'ES6'}
        ],
        dtps: [
            {name:'일러스트', content:'일러스트레이터 기초'},
            {name:'포토샵', content:'포토샵 기초'},
            {name:'디일러', content:'일러스트레이터 활용'},
            {name:'포토웍스', content:'포토샵 활용'}
        ],
        arts: [
            {name:'디지털드로잉', content:'디자인 작업의 기본'},
            {name:'발상과표현', content:'다양한 재료를 이용한'},
            {name:'해부학', content:'드로잉실습을 통해 인체 구조 습득'},
            {name:'컨셉드로잉', content:'발상과 표현'}
        ]
    };
    const vm5 = Vue.createApp({
        data(){
            //return depart;
            return{
                web: depart.sbsweb,
                dtp: depart.sbsdtp,
                art: depart.sbsart
            }
        }
    });
    vm5.component('web',{
        template:`
            <ul>
                <li v-for="s in webs">{{s.name}} : {{s.content}}</li>
            </ul>
        `,
        data: function(){
            return subject;
        }
    });
    vm5.component('dtp',{
        template:`
            <ul>
                <li v-for="s in dtps">{{s.name}} : {{s.content}}</li>
            </ul>
        `,
        data: function(){
            return subject;
        }
    });
    vm5.component('art',{
        template:`
            <ul>
                <li v-for="s in arts">{{s.name}} : {{s.content}}</li>
            </ul>
        `,
        data: function(){
            return subject;
        }
    });
    vm5.mount('#vm5');
</script>

• props + for 활용

<div id="vm7">
    <ul>
        <web-props v-for="ss in webs" :websub="ss"></web-props>
    </ul>
    <ul>
        <dtp-props v-for="ss in dtps" :dtpsub="ss"></dtp-props>
    </ul>
    <ul>
        <art-props v-for="ss in arts" :artsub="ss"></art-props>
    </ul>
</div>

<script>
    const vm7 = Vue.createApp({
        data(){
            return subject;
        }
    });
    vm7.component('webProps',{
        props: ['websub'],
        template: `<li>{{websub.name}} : {{websub.content}}</li>`
    });
    vm7.component('dtpProps',{
        props: ['dtpsub'],
        template: `<li>{{dtpsub.name}} : {{dtpsub.content}}</li>`
    });
    vm7.component('artProps',{
        props: ['artsub'],
        template: `<li>{{artsub.name}} : {{artsub.content}}</li>`
    });
    vm7.mount('#vm7');
</script>

• props + 양방향 바인딩

<div id="vm8">
    <p>{{inputText}}</p>
    <input type="text" placeholder="텍스트를 입력하세요." v-model="inputText">
    <hr>
    <comp-input :comp-input-text="inputText"></comp-input>
</div>

<script>
    const vm8 = Vue.createApp({
        data(){
            return{
                inputText: 'hhh'
            }
        }
    });
    vm8.component('compInput',{
        props: ['compInputText'],
        template: `
            <div>
                <p>{{compInputText}}</p>
                <input type="text" placeholder="텍스트를 입력하세요." v-model="compInputText">
            </div>
        `
    });
    vm8.mount('#vm8');
</script>