개요

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

 

컴포넌트의 등록과 사용

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

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

컴포넌트간 데이터 교환

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

 

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 입문서 - 프론트엔드 개발자를 위한

Vue.js를 시작하기 위한 소개, 구성요소, 구조, Vue Router, HTTP 통신 라이브러리 등

joshua1988.github.io

rwd337.tistory.com/134

 

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

이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법이다. 이전 포스팅에서 컴포넌트간 통신은 항상 상위-하위 구조를 유지해야 데이터를 주고받을 수 있었다.

rwd337.tistory.com

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

 

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

Vue.js의 기본 개념을 익히고 기본적인 Vue.js Component를 생성해 보자. Vue.js의 Component 개념은 Vue.js Framework에서도 중요한 부분을 차지하고 어떻게 Vue.js Component를 생성하느냐에 따라 Vue.js의 개발속도

kdydesign.github.io

 

반응형

'■ 웹 개발 > Vue.js' 카테고리의 다른 글

[6] Vue 템플릿  (0) 2020.11.16
[5] Axios  (0) 2020.11.16
[4] Vue 라우터  (0) 2020.11.16
[2] Vue 인스턴스  (0) 2020.11.16
[1] Vue.js의 개요와 MVVM 패턴  (0) 2020.11.16

+ Recent posts