[3] Vue 컴포넌트

개요

화면의 영역을 일젛안 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다.

 

컴포넌트의 등록과 사용

- 글로벌 컴포넌트 : 인스턴스 생성 후, 다른 페이지나 컴포넌트에서 사용하는 컴포넌트이다.

- 로컬 컴포넌트 : 사용될 곳에 바로 삽입하여 사용하는 컴포넌트이다.

컴포넌트간 데이터 교환

각 컴포넌트는 각자의 스코프를 가지고 있기 때문에, 타 컴포넌트의 값을 직접 참조할 수 없다.

 

1. 부모 - 자식 : 통상, '부모 - 자식' 관계로 만들고, 컴포넌트의 집합인 컴포넌트에도 '부모 - 자식'관계가 된다.

- 부모 -> 자식 : 데이터(props)를 내린다.

- 자식 -> 부모 : 이벤트를 올린다.(Emit Events)

부모는 자식에게 v-bind ( : )를 통해 데이터를 전달하고, v-on (@)을 통해 자식에 정의된 이벤트를 수신할 수 있다.

※ props 변수명을 카멜 기법으로 정의하면, html 태그에서 사용할 때는 케밥 기법(-)으로 선언해야 한다.

 

2. 상위-하위 관계가 아닌 컴포넌트

- 이벤트 버스를 활용할 수 있다.

 

이벤트 버스의 개요와 사용법

- 개요

개발자가 지정한 2개의 컴포넌트 간 데이터를 주고받을 수 있는 방법이다.

 

- 기본 문법

1) 애플리케이션 로직을 담는 인스턴스와는 별개의 새로운 인스턴스를 생성한다.

2) 이벤트를 보낼 컴포넌트를 정의한다.

3) 이벤트를 받을 컴포넌트를 정의한다.

출처 : 

joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

Vue.js 입문서 - 프론트엔드 개발자를 위한

rwd337.tistory.com/134

이벤트 버스(관계없는 컴포넌트 간 통신)

kdydesign.github.io/2019/04/27/vue-component/

[Vue.JS] Component 개념을 익히고 만들어보자!!