[Vue.js 시작하기] 컴포넌트

뷰 컴포넌트

• 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
• 재사용성이 올라가고 빠르게 화면을 제작할 수 있습니다.

지역 컴포넌츠와 전역 컴포넌트의 차이점

전역 컴포넌트

전역으로 사용해야 되는 컴포넌트만 사용한다.

 

지역 컴포넌트

components: 여러개임!

특정 컴포넌트 하단에 어떤 컴포넌트가 등록되어있는지 한 눈에 알 수 있다.

일반적으로는 지역 컴포넌트를 사용한다.

 

컴포넌트와 인스턴스와의 관계

"인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다. "

컴포넌트 통신 방식

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

• 상위에서 하위로는 데이터를 내려줌, 프롭스 속성

• 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생

 

프롭스 속성

프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법.

프롭스 속성을 기억할 때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억하면 쉽다. 

 

프롭스 속성을 사용하기 위해서는 하위 컴포넌트의 내용과 상위 컴포넌트의 템플릿에 각각 코드를 추가해주어야 한다. 

// 하위 컴포넌트의 내용
var childComponent = {
  props: ['프롭스 속성 명']
}

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <child-component v-bind:프롭스 속성 명="상위 컴포넌트의 data 속성"></child-component>
</div>

프롭스 속성 코드 예시

// 하위 컴포넌트 : 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>

 

 

이벤트 발생

이벤트 발생은 컴포넌트 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식입니다. 

 

이벤트 코드 예시

// 하위 컴포넌트 : 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>

 

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

• 바로 통신은 못함.
• 루트를 통해서 통신