[Vue.js] 뷰 컴포넌트 통신

📝 컴포넌트 통신

---

• 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다.
• 그 이유는 컴포넌트마다 자체적으로 고유한 유효범위(Scope)를 갖기 때문이다.
• 각 컴포넌트의 유효범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.
• 장점
  • 뷰에서 미리 정의해 놓은 데이터 전달 방식에 따라 일괄된 구조로 애플리케이션을 작성하게 된다.
  • 개발자 개개인의 스타일대로 구성되지 않고, 애플리케이션이 모두 동일한 데이터 흐름을 갖게 된다.
  • 이렇게 되면 다른 사람의 코드를 빠르게 파악할 수 있어 협업하기에 좋다

상-하위 컴포넌트 관계

• 상위에서 하위로는 props
• 하위에서 상위로는 기본적으로 이벤트만 전달 가능

props 속성 (상위 -> 하위)

• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성

Vue.component('child-component', {
    props: ['props 속성 이름'],
})

• v-bind:propsdata="message"는 상위컴포넌트의 message 속성 값인 Hellow~ 텍스트를 하위 컴포넌트의 propsdata로 전달하였다.

예제

<div id="app">
    <!--팁: 오른쪽에서 왼쪽으로 읽으면 수월하다-->
    <child-component v-bind:propsdata="message"></child-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('child-component', {
        props: ['propsdata'],
        template: '<p>{{ propsdata }}</p>'
    })

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue! passed from Parent Component'
        }
    })
</script>

 

이벤트 발생과 수신 (event emit) (하위 -> 상위)

• 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것이다.
• 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용해 구현한다.

this.$emit('이벤트명')

<child-component v-on:하위 컴포넌트의 이벤트명="상위컴포넌트의 메서드명"></child-component>

예제

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.component('child-component', {
        template: '<button v-on:click="showLog">show</button>',
        methods: {
            showLog: function() {
                this.$emit('show-log');
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue! passed from Parent Component'
        },
        methods: {
            printText: function () {
                console.log("received an event");
            }
        }
    })

</script>

 

이벤트 버스

• 이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고 받을 수 있는 방법
• 이벤트 버스를 이용하면 상위-하위 관계를 유지하고 있지 않아도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.
• 보내는 컴포넌트에서는 .$emit()
• 받는 컴포넌트에서는 .$on()

//이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue()

//이벤트 내보내는 컴포넌트
methods: {
    메서드명: function() {
        eventBus.$emit('이벤트명', 데이터);
    }
}

//이벤트를 받는 컴포넌트
methods: {
    created: function() {
        eventBus.$on('이벤트명', function(데이터) {
            
        });
    }
}