ABOUT ME

    -

    오늘 방문자
    -
    어제 방문자
    -
    전체
    -
    • [Vue.js] Vue 컴포넌트 데이터 주고 받기
      Vue 2019. 1. 14. 00:52


      "vue 프레임워크의 기본적인 데이터 전달 방식은 상위-하위간 데이터 전달이다."


      기본 방식은 아래와 같다

      상위 -> 하위 (props 전달)

      하위 -> 상위 (이벤트 전달)



      각각 컴포넌트들은 고유한 유효범위를 가지고 있어 직접 다른 컴포넌트 값을 참조 할 수 없음

      아래코드 참고 ㅎㅎ



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title></title>
        </head>
        <body>
          컴포넌트 간의 통신!
          <div id="app1">
            <local-component1></local-component1>
            <local-component2></local-component2>
          </div>
       
          <script>
              var obj1 = {
                template : '<div> 첫번째 지역 컴포넌트: {{result}} </div>',
                data : function(){
                  return {
                    result : 12345
                  }
                }
              };
       
              var obj2 ={
                template : '<div> 두번째 지역 컴포넌트: {{result}} </div>',
                data : function(){
                  return {
                    result : obj1.data.result   // obj1 컴포넌트 값에 접근 불가!
                  }
                }
              };
       
              new Vue({
                el : '#app1',
                components : {
                  'local-component1' : obj1,
                  'local-component2' : obj2
                }
              });
          </script>
       
        </body>
      </html>
       
      		cs



      결과화면





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


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title></title>
        </head>
        <body>
          <b>상위에서 하위 컴포넌트로 데이터 전달 하기!</b>
          <div id="app1">
            <child-component v-bind:pdata="message"></child-component>
          </div>
       
          <script>
            Vue.component('child-component',{
              props : ['pdata'],
              template : '<div> {{pdata}} </div>'
            });
       
              new Vue({
                el : '#app1',
                data : {
                    message : '아들아 받아라'
                }
              });
          </script>
       
        </body>
      </html>
       
      		cs


      11행의  v-bind : pdata 이렇게  띄어 쓰기하면 에러남.. 삽질했다... v-bind쓰고 꼭 붙여 쓰자


      결과화면






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


      하위에서 상위 컴포넌트로 데이터 전달 할 수 있는 방법은 있다 

      이벤트 버스를 이용하면된다. 하지만 vue의 단방향 데이터 흐름에 어긎나는 구현 방법이다.

      일단 여기까지만 알아두고


      이벤트 발생은  $emit()

      이벤트 수신은 v-on: 속성을 사용해 구현 한다


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title></title>
        </head>
        <body>
          <b>하위에서 상위 컴포넌트로 이벤트 전달 하기!</b>
          <div id="app1">
            <!-- child-event는 하위 컴포넌트의 이벤트명 -->
            <!-- printText는 상위 컴포넌트의 메서드명 -->
            <child-component v-on:child-event="patentReceive"></child-component>
          </div>
       
          <script>
            Vue.component('child-component',{
              template : '<button v-on:click="sendEvent"> 버튼 </button>',
              methods:{
                        sendEvent : function(){
                        this.$emit('child-event'); // 이벤트 발생 로직
                      }
                  }
            });
       
              new Vue({
                el : '#app1',
                methods : {
                  patentReceive : function() {
                    alert('받았다요~');
                  }
                }
              });
          </script>
       
        </body>
      </html>
       
      		cs



      결과화면




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

      이벤트버스 : 지정한 2개의 컴포넌트간에 데이터를 주고받을 수 있는 방법

      이벤트버스를 이용하면 상위-하위 관계 유지하지 않아도 데이터를 주고 받을 수 있음.


      보내는 컴포넌트에서는 .$emit()

      받는 컴포넌트에서는 .$on()을 구현한다



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <title></title>
        </head>
        <body>
          <b>이벤트버스 테스트!~</b>
          <div id="app1">
            <child-component></child-component>
          </div>
          <script>
            //전역 컴포넌트 생성
            var eventBus = new Vue();
            Vue.component('child-component',{
              template : '<div> 하위 컴포넌트 영역 <button v-on:click="sendMessage"> 이벤트 전송 버튼</button> </div>',
              methods : {
                sendMessage : function(){
                  eventBus.$emit('sendEventName', 100000000000); // 이벤트를 보내는 컴포넌트
                }
              }
            });
            var app = new Vue({
              el : '#app1',
              created : function(){ // create 라이프 사이클 훅
                eventBus.$on('sendEventName', function(value){  // 이벤트를 받은 컴포넌트
                  alert('전달받은 데이터:'+ value);
                });
              }
            });
          </script>
        </body>
      </html>
       
      		cs



      단점

      너무 많이쓰면 관리가 힘듬. 이 문제는 Vuex라는 상태관리도구로 해결 할 수 있다. 



      아직 패턴이 익숙하지않아서 낯설다.. 역시 타이핑을 많이 해봐야 익숙할 듯하다..




      'Vue' 카테고리의 다른 글

      [Vue.js] 네임드뷰  (0) 2019.01.21
      [Vue.js] Vue 라우터란?  (2) 2019.01.20
      [Vue.js] Vue 인스턴스의 라이프 사이클  (0) 2019.01.13
      [Vue.js] Vue 컴포넌트란?  (0) 2019.01.13
      [Vue.js] Vue.js란?  (0) 2018.12.05

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바