Vue Componets 통신

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

1. 상·하위 컴포넌트 간 통신
2. 같은 레벨의 컴포넌트 간 통신
3. 관계 없는 컴포넌트 간 통신

<Vue Componets 통신>

한 화면에 있더라도 각 컴포넌트의 유효범위는 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.

1. 상·하위 컴포넌트 간 통신

지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 자연스럽게 자식 컴포넌트가 되고, 자식 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다.

1) 상위에서 하위 컴포넌트로 데이터 전달(Pass Props)

하위 컴포넌트의 속성에 props속성을 정의하고,

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

상위 컴포넌트의 HTML코드에 등록된 child-component컴포넌트 태그에 v-bind속성을 추가한다.

<child-component v-bind:props 속성이름 = "상위 컴포넌트의 data 속성"></child-component>

ex) 아래 예제처럼 인스턴스(root 컴포넌트)에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위(부모)컴포넌트가 되고, 새로 등록된 컴포넌트는 하위(자식)컴포넌트가 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Props Sample</title>
  </head>
  <body>
    <div id="app">
      <!-- 팁 : 오른쪽에서 왼쪽으로 속성을 읽으면 더 수월합니다. -->
      <child-component v-bind:propsdata="message"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/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>
  </body>
</html>

2) 하위에서 상위 컴포넌트로 이벤트 전달(Emit Events)

하위 컴포넌트의 특정 이벤트가 발생하면

this.$emit('이벤트명');  //이벤트 발생

상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트 메서드를 호출한다.

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

ex)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Event Emit Sample</title>
  </head>
  <body>
    <div id="app">
      <child-component v-on:show-log="printText"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/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>
  </body>
</html>

2. 같은 레벨의 컴포넌트 간 통신

뷰는 상위에서 하위로만 데이터를 전달해야 하는 기본적인 통신규칙을 따른다.
바로 옆 컴포넌트에 값을 전달하려면 하위에서 공통 상위 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props을 내려야한다.

3. 관계 없는 컴포넌트 간 통신(이벤트 버스)

1) 이벤트 버스

중간 컴포넌트들을 거치지 않고 하위 컴포넌트 B에서 상위 컴포넌트 A로 바로 데이터를 전달할 수 있는 데이터 전달 방식
이벤트 버스를 활용하면 props속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생한다. 이를 Vuex라는 상태 관리 도구가 필요하다.

2) 이벤트 버스 형식

이벤트 버스를 위한 새로운 인스턴스를 1개 생성하고,

var eventBus = new Vue();

새 인스턴스를 이용하여 이벤트를 보내고 받는다.

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

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

ex)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Event Bus Sample</title>
  </head>
  <body>
    <div id="app">
      <child-component></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      var eventBus = new Vue();

      Vue.component('child-component', {
        template: '<div>하위 컴포넌트 영역입니다.<button v-on:click="showLog">show</button></div>',
        methods: {
          showLog: function() {
            eventBus.$emit('triggerEventBus', 100);
          }
        }
      });

      var app = new Vue({
        el: '#app',
        created: function() {
          eventBus.$on('triggerEventBus', function(value){
            console.log("이벤트를 전달 받음. 전달 받은 값 : ", value);
          });
        }
      });
    </script>
  </body>
</html>

show버튼을 클릭하면 아래와 같은 console화면이 나온다.

저작자표시 비영리 변경금지

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

뷰 HTTP 통신 (0)	2020.07.02
Vue Router (0)	2020.07.02
Vue Componets (0)	2020.07.02
Vue Instance (0)	2020.07.01
Vue 시작하기 (+개발 환경 설정) (0)	2020.06.30

winnih_B

LINKS

CATEGORY

Vue Componets 통신