TIL | Vue 05일차 (컴포넌트 통신, props, event emit)

space's pace·2022년 9월 26일

Props event emit vue 인스턴스 컴포넌트

Vue

목록 보기

5/9

컴포넌트 통신 방식

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 한다.

상위에서 하위(부모 -> 자식)로는 데이터를 내려줌 = props 속성
하위에서 상위(자식 -> 부모)로는 이벤트를 올려줌 = event 속성

Props

    let appHeader = {
      template: '<h1>{{propsdata}}</h1>',
      props: ['propsdata']
    };

    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader
      },
      data: {
        message: 'hi'
      }
    })

상위 컴포넌트의 값을 변경해주면 props로 속성을 내려줬던 하위 컴포넌트에도 바뀐 값이 적용된다.

상위에서 하위로 props 내리는 방법

<!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: 프롭스 속성이름 = "상위 컴포넌트의 데이터 이름"></app-header> -->
    <app-header v-bind:propsdata = "message"></app-header>
    <app-content v-bind:propsdata ="num"></app-content>
  </div>

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

    let appContent = {
      template: '<div>{{propsdata}}</div>',
      props: ['propsdata']
    }

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

v-bind를 통해 상위 컴포넌트의 data 속성인 message를 propsdata라는 속성으로 전달한다.

주의@
props 변수 명을 카멜 기법으로 정의하면 html 태그에서 사용할 때는 케밥 기법(-)으로 선언해야 한다. 만약 프롭스 속성명을 카멜 기법인 pasedData로 선언했을 때 주의해야 한다.

event emit

아래에서 위로 (자식에서 부모)로 컴포넌트 통신을 해야 한다면, 이벤트를 올리게 된다.

<!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">
    <p>{{num}}</p>
    <!-- <app-header v-on: 하위 컴포넌트에서 발생한 이벤트 이름=상위 컴포넌트 메서드 이름"></app-header> -->
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:plus="addNum"></app-content>
  </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');
        }
      }
    }

    let appContent = {
      template: '<button v-on:click="addNumber">add</button>',
      methods: {
        addNumber: function() {
          this.$emit('plus')
        }
      }
    }
    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent
      },
      methods: {
        logText: function() {
          console.log('hi');
        },
        addNum: function() {
          this.num = this.num + 1
        }
      },
      data: {
        num: 10
      }
    })
  </script>
</body>
</html>