[Vue] Level1 - 2. 컴포넌트 통신

Vue

[Vue] Level1 - 2. 컴포넌트 통신

hahihuree 2021. 12. 14. 16:23

컴포넌트 통신

뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖음. 컴포넌트 간에 데이터를 주고 받기 위해서는

상위->하위: props 속성 전달(데이터를 내려줌)
하위->상위: 이벤트 발생 (이벤트를 올려줌)

props

인스턴스 속성인 components만들고 지역컴포넌트 생성
변수로 빼서(가독성위해) template에 작성하고, props에 프롭스 속성의 이름 작명
data만들고 전달하고자 하는 데이터 작성
해당 인스턴스 안에 컴포넌트 태그로 화면에 보여주기

<body>
  <div id="app">
    <!-- <app-header v-vind:프롭스 속성 이름='상위 컴포넌트의 데이터 이름'></app-header> -->
    <app-header v-bind:propsdata='message'></app-header>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var appHeader = {
      template: '<h1>{{propsdata}}</h1>',
      props: ['propsdata']
    };

    new Vue({
      el: '#app',
      components: {
        'app-header':appHeader
      },
      data: {
        message: 'hi'
      }
    });
  </script>
</body>

event emit

컴포넌트 만드는것까지 동일
template 속성에 v-on:click="이벤트명" 으로 이벤트 전달
methods 속성에 객체로 해당 이벤트(이벤트명) 함수 작성 this.$emit('전달할것') 이라는 api(기능) 사용

<body>
  <div id="app">
    <app-header></app-header>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var appHeader = {
      template: '<button v-on:click="passEvent">click me</button>',
      methods: {
        passEvent: function(){
          this.$emit('pass')
        }
      }
    };

    new Vue({
      el: '#app',
      components: {
        'app-header':appHeader,
      }
    })
  </script>
</body>

4. <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> 형식으로 이벤트 전달

<body>
  <div id="app">
    <app-header v-on:pass="logText"></app-header>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var appHeader = {
      template: '<button v-on:click="passEvent">click me</button>',
      methods: {
        passEvent: function(){
          this.$emit('pass')
        }
      }
    };

    new Vue({
      el: '#app',
      components: {
        'app-header':appHeader,
      },
      methods: {
        logText: function () {
          console.log('hihihi');
        }
      }
    })
  </script>
</body>

this

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

데이터를 보내는 곳에서 event로 올리고 (상위 컴포넌트인 root로)
데이터를 받는 곳에서 props로 속성을 전달 받음(root에서부터)
그런데 root가 props로 전달을 해주려면 data를 가지고 있어야 하기때문에 data 속성 선언(new Vue 안에)
해당 data를 props의 작명한 이름으로 전달하고 html태그에 v-bind로 바인딩

<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>
    var appHeader = {
      template: '<div>header</div>',
      props: ['propsdata']
    }
    var appContent = {
      template: '<div>content<button v-on:click="passNum">btn</button></div>',
      methods: {
        passNum: function(){
          this.$emit('pass', 10)
        }
      }
    }
    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent,
      },
      data: {
        num: 0,
      },
      methods: {
        deliverNum: function(value){
          this.num = value;
        }
      }
    })
  </script>
</body>