[vue.js] 컴포넌트 응용(같은 컴포넌트간 전달)

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

Root(Intance)

App Header / AppContent

위->아래: Props

아래->위: Event

{{ }}라는 것을 사용하여, 인스턴스 내 data를 view에 바로 반영할 수 있다.

# 같은 레벨 간의 통신 방법

먼저 A 자식 컴포넌트에서 부모 컴포넌트로 Event 로 전달 -> 

부모 컴포넌트에서 Props로 B 자식 컴포넌트로 데이터 전달 

 

  // 1. Root로 사용할 View 선언

  <div id="app">

    // 13. v-bind:<Props속성이름>="변수명" 으로 부모컴포넌트에서 자식컴포넌트로 데이터 전달

    <app-header v-bind:propsdata="num"></app-header>

    // 10. v-on:<이벤트명>="메소드명"

    <app-content v-on:pass="deliverNum"></app-content>

  </div>

  // 2. Vue 스크립트 선언

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>

    var appHeader = {

      template: '<div>header</div>',

      // 14. propsdata라는 props를 선언하고, 부모컴포넌트에서 props에 데이터를 받아옴

      props: ['propsdata']

    }

    var appContent = {

      // 7. 컴포넌트 템플릿 정의

      template: '<div>content<button v-on:click="passNum">pass</button></div>',

      methods: {

        // 8. click 이벤트 시, passNum 함수 호출

        passNum: function() {

          this.$emit('pass', 10); // 9. 부모 컴포넌트로 pass 이벤트 호출

        }

      }

    }

    // 3. Vue 인스턴스 정의

    new Vue({

      // 4. Root Element 매핑

      el: '#app',

      // 6. 지역 컴포넌트 정의

      components: {

        'app-header': appHeader,

        'app-content': appContent

      },

      // 5. 인스턴스 내 데이터 정의

      data: {

        num: 0

      },

      // 11. 인스턴스 내 메소드 정의

      methods: {

        deliverNum: function(value) {

          // 12. 인스턴스 내 데이터를 변경

          this.num = value;

        }

      }

    })

  </script>