[Vue.js] Components / props & $emit

👨‍💻 코드를 간소화 하고 재사용 할 수 있게 하는 구성

Global Component

---

🔵 HTML 전역 사용 가능

<script>
    Vue.component("tag-name", {View})
</script>

tag-name : HTML tag 이름 지정 (str)

{view} : tag 작성 구간

예제:

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

<hr color="red">

<div id="app2">
    <g-com></g-com>
</div>

<script>
    Vue.component('g-com', {
        template: '<b>전역 컴포넌트</b>'
    });
</script>

template : root tag 필수 - root tag 없이 작성 시 오류

<template> tag를 활용하여 UI 를 미리 설계를 많이 함 :

❕ Vue 3 Snippets 에도 자동완성이 포함될 정도로 자주 사용하나 봄!

<script>
    Vue.component("child-com", {
        template: "#child",
        data: function(){
            return {
                myMoney : 1000000
            }
        }
    });
</script>

❕ Global Component 의 data는 함수식으로 되어야 한다.

Local Component

---

🔵 Vue Instance 내 지정된 Tag 내부에서만 사용 가능

<div id="app1">
    <i-com></i-com>
</div>

<script>
    new Vue({
        el : "#app1",
        components : {
            'i-com' : {
                template: '<P>로컬 컴포넌트</p>'
            }
        }
    });
</script>

상위 하위 컴포넌트간의 데이터 전달

---

• $emit

• props

props

---

🔵 props라는 속성을 통해서 부모 컴포넌트가 자식 컴포넌트에게 데이터 공유

<template id="t2">
<div>
    <button>{{msg}}</button>
    </div>
</template>

<div id="app3">
    <btn-com3 v-bind:msg="m"></btn-com3>
</div>

<script>
    Vue.component("btn-com3",{
        template: "#t2",
        props: ["msg"]
    });

    new Vue({
        el: "#app3",
        data: {
            m: "playdata"
        }
    });

</script>

설명:

<div id="#app3> parent의 data.m 을 v-bind:msg='m' 을 통해 child <btn-com3>에 있는 msg 라는 키를 가진 값에 data.m을 binding

$emit

---

🔵 자식에서 부모로 데이터 공유

🔵 method 추가 구현, method로 데이터 공유

<div id="app5">
    <!-- 
child-com 내부의 UI에서 발생되는 이벤트 들로 인해
실행돤ㄴ 메소드 내부으ㅔ 데이터들으르 parameter로 받을 수 있는
부모의 메소드 지정
단 자식의 어떤 데이터를 부모의 어떤 method에게 데이터값을 줄 것인가 설정
-->
    <child-com v-on:event-data1="viewData"></child-com>
    <child-com v-on:event-data2="viewData"></child-com>
    <child-com v-on:event-data2="viewData2"></child-com>
    <span>{{msg}} - {{myName}}</span>
</div>

<script>

    Vue.component("child-com", {
        // template UI에서 method 호출 
        template: '<button @click="showLog">Show Data</button>',
        methods: {
            showLog: function(){
                this.$emit('event-data1', '자식이 부모에게 공유한 데이터');
                this.$emit('event-data2', '오징어 게임');
            }
        },
    });

    new Vue({
        el: "#app5",
        data: {
            msg: 'parent-data',
            myName: '전소민'
        },
        methods: {
            viewData: function(v){
                console.log(v);
                this.msg = v;
            },
            viewData2: function(v){
                this.myName = '전소민';
                console.log(v);
                this.myName = `${this.myName} ${v}`;
            }
        },
    })

</script>

$emit(key, 전송데이터)

key : 사용자정의 tag의 속성명으로 사용

<child-com v-on:event-data1="viewData"></child-com>

viewData(event-data1) 와 동일항 방식의 함수 실행