Vue 컴포넌트 통신

cho·2022년 1월 27일
0

Vue

목록 보기
2/3

뷰는 화면의 구성을 컴포넌트로 해서 서로 데이터를 공유할 수 없는 경우가 생긴다.
컴포넌트 각각 고유한 scope(유효범위)가 있어서 데이터를 직접 참조하는 것이 불가능하다.

부모-자식 컴포넌트 관계

(출처:https://kr.vuejs.org/images/props-events.png)

기본적으로 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보낸다.

상위에서 하위로 데이터 전달

props : 상위 컴포넌트의 정보를 전달하기위한 속성. 하위 컴포넌트의 속성에 정의한다.

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

child-component 태그에 v-bind 속성 추가

<child-component v-bind:props이름="data 속성"></child-component>

하위에서 상위로 이벤트 전달

이벤트를 발생시키는 $emit()과 이벤트를 수신하는 v-on 속성 사용

this.$emit('eventName')
<app-content v-on:eventName="상위 컴포넌트의 메서드명"></app-content>

예제로 알아보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header v-bind:propsdata="num"></app-header>
        <app-content v-on:pass="deliverNum"></app-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        
        new Vue({
            el : '#app',
            components: {
                'app-header': {
            template: '<div>header</div>',
            props: ['propsdata']
            },
                'app-content': {
            template: '<div>content<button v-on:click="passNum">pass</button></div>',
            methods: {
                passNum: function(){
                    this.$emit('pass',10)
                }
            }
        }
            },
            data: {
                num: 0
            },
            methods: {
                deliverNum: function(value){
                    this.num = value;
                }
            }
        })
    </script>
</body>
</html>

해당 예시를 실행하면 이런 화면이 뜨는데

이 상태에서 pass 버튼을 클릭하면 passNum 메서드가 실행되고 passNum내부의 this.$emit('pass',10)가 pass이벤트를 발생시킨다.
pass이벤트가 10을 전달해서 deliverNum을 실행시키고 num을 10으로 만들고 propsdata가 10이 된다.

성공적으로 바뀐모습이다.

그렇다면 항상 상위에서 하위로 데이터를 전달해야 하는데 같은 레벨의 컴포넌트에서는 불필요하게 상위 컴포넌트를 만들어야한다.
이것을 해결하기 위해 이벤트 버스라는 방법이 존재한다

이벤트 버스

개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법.

이벤트 버스를 위한 뷰 인스턴스를 생성하고 이것을 활용해서 이벤트를 주고 받는다.

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

//이벤트 송신
methods: {
    메소드명: function(){
      eventBus.$emit('eventName',data);
    }
}


//이벤트 수신
methods: {
    created: function() {
    	eventBus.$on('eventName',function(data){
		함수내용
	});
    }
}

이벤트 버스를 통해 props 속성 없이도 컴포넌트간에 데이터를 전달하는 것이 가능해졌다.
하지만 컴포넌트가 많아지면 데이터가 어디에서 어디로 보내졌는지 관리가 힘들어서 vuex라는 상태 관리도구가 필요하다.

참고자료
vue.js

0개의 댓글