컴포넌트 간의 통신방식

일단 컴포넌트가 무엇일까?

Vue.js Guide 에는 이렇게 적혀있음

내가 알기로는 인스턴스의 속성들중 하나이다
그렇다면 인스턴스는 무엇인지...

인스턴스의 속성,API들

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

• el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
• template : 화면에 표시할 요소 (HTML, CSS 등)
• data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
• methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
• created : 뷰의 라이프 사이클과 관련된 속성
• watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

뷰 컴포넌트

뷰 컴포넌트는 상위컴포넌트와 하위컴포넌트로 구성되어있고 컴포넌트간의 통신으로 데이터를 주고받는다

그렇다면 컴포넌트간의 통신방식은 어떻게 ?

상위 컴포넌트 ---> 하위 컴포넌트 : Props
하위 컴포넌트 ---> 상위 컴포넌트 : Event

props속성 사용 예시

props: ['propsdata'],

v-bind:propsdata="message"

위의 코드를 유심히 살펴보자

// 하위 컴포넌트 : childComponent
var childComponent = {
  props: ['propsdata'],
  template: '<p>{{ propsdata }}</p>'
}

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  data: {
    message: 'hello vue.js'
  }
})

<div id="app">
  <child-component v-bind:propsdata="message"></child-component>
  <!-- 위의 출력 결과는 hello vue.js -->
</div>

Event속성 사용 예시

this.$emit('update')

위의 코드를 유심히 살펴보자

// 하위 컴포넌트 : childComponent
var childComponent = {
  methods: {
    sendEvent: function() {
      this.$emit('update');
    }
  }
}

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  methods: {
    showAlert: function() {
      alert('event received');
    }
  }
})

<div id="app">
  <child-component v-on:update="showAlert"></child-component>
</div>

저의 벨로그의 내용은
저의 인프런 센세,,, 캡틴판교님의 문서에서 따왔습니다!
감사합니다 캡틴판교님!