Pass Props & Emit Event

Data in component

컴포넌트는 부모- 자식 관계만 데이터를 주고받게 하자!

-> 데이터 흐름을 파악하기 용이

-> 유지보수가 쉬워짐

 

 

 

 

pass props

부모 => 자식으로의 데이터 전달 방식

• 요소의 속성을 사용하여 데이터 전달
• props는 부모 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성
• 자식 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언

-> msg는 전달하려는 부모 컴포넌트의 데이터 (String 타입으로 선언)

-> template에서 {{ msg }} 형태로 사용한 것

-> 부모 컴포넌트인 App.vue의 <HelloWorld/>요소에 msg='~' 라는 property 설정

 

• 정적인 데이터를 전달하는 경우 static props라고 명시하기도 함
• 요소에 속성을 작성하듯이 사용 가능하여, prop-data-name='value' 형태로 데이터 전달 (kebab-case)

 

 

 

 

Pass Props convention

보낼 때는 html, 받는 쪽은 JS 이므로 케밥 케이스로 보내고 받는쪽에서는 카멜 케이스!!

 

props

• 상위 => 하위 흐름에서 HTML 요소로 내려줌 : kebab-case
• 하위에서 받을 때 JavaScript에서 받음 : camel-case

emit

• emit 이벤트를 발생시키면 HTML 요소가 이벤트를 청취함 : kebab-case
• 메서드, 변수명 등을 JavaScript에서 사용함 : camel-case

 

 

 

 

Dynamic Props

: 변수를 props으로 전달할 수 있음

• v-bind를 사용해 데이터를 동적으로 바인딩
• 부모 컴포넌트의 데이터가 수정되면 자식 컴포넌트로 전달되는 데이터 또한 업데이트

MyComponent.vue

myComponentItem.vue

myComponentItem.vue

 

 

컴포넌트의 data 함수

각 vue 인스턴스는 같은 data 객체를 공유하므로 새로운 data 객체를 반환하여 사용해야 함

 

: dynamic-props = "dynamicProps"

=> 앞의 key값(dynamic-props)이란 이름으로 뒤의 ""안에오는 데이터(dynamicProps)를 전달하겠다는 뜻

=> 즉 , :cute-props="dynamicProps"로 데이터를 넘긴다면 자식 컴포넌트에서 cuteProps로 데이터를 받아야 함

=> v-bind로 묶여있는 "" 안의 구문은 js의 구문으로 볼 수 있음, 따라서 dynamicProps라고 하는 변수에 대한 data를 전달함

 

// 1
<mycomponent num-props="1"/>

// 2
<mycomponent :num-props="1"/>

-> 첫 번째 방식은 static-props로 string으로써의 "1" 전달

-> 두 번째 방식은 dynamic props로 숫자 1을 전달

 

 

단방향 데이터 흐름

• 모든 props는 부모에서 자식으로 즉 아래로 단방향 바인딩을 형성
• 부모 속성이 업데이트되면 자식으로 흐르지만 반대 방향은 아님
• 하위 컴포넌트에서 prop을 변경하려고 시도해서는 X

"하위 컴포넌트가 실수로 상위 컴포넌트 상태를 변경하여 앱의 데이터 흐름을 이해하기 힘들게 만드는 것을 방지"

 

 

 

 

 

 

Emit Event

자식 => 부모로의 데이터를 전달할 때는 이벤트를 발생시킴

 

1. 데이터를 이벤트 리스너의 콜백 함수의 인자로 전달

2. 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받음

 

 

 

 

$emit

: $emit 메서드를 통해 부모 컴포넌트에 이벤트를 발생

• $emit( ' event-name ' ) 형식으로 사용하며 부모 컴포넌트에 event-name이라는 이벤트가 발생했다는 것을 알림
• 마치 사용자가 마우스 클릭을 하면 click 이벤트가 발생하는 것처럼 $emit('event-name')이 실행되면 event-name 이벤트가 발생하는 것

 

1. 자식 컴포넌트에 버튼을 만들고 클릭 이벤트 추가

- 여기서는 버튼 클릭 시 함수 호출, 값을 입력하고 엔터키를 누르면 input 데이터를 보내보겠음,,ㅎ

2. $emit을 통해 부모 컴포넌트에게 child-to-parent 이벤트를 트리거

- 이벤트를 발생시킬 때 인자로 데이터를 전달 가능하다

this.$emit("함수-이름", 보낼 데이터)

3. emit된 이벤트를 상위 컴포넌트에서 청취 후 핸들러 함수 실행

전달된 inputData는 이벤트와 연결된 부모 컴포넌트의 핸들러 함수 인자로 사용 가능하다.

 

 

 

흐름 정리

1. 자식 컴포넌트에 있는 버튼 클릭 이벤트를 청취하여 연결된 핸들러 함수 호출

2. 호출된 함수에서 $emit을 통해 상위 컴포넌트에 이벤트를 발생

-> 이벤트에 데이터를 함께 전달

3. 상위 컴포넌트는 자식 컴포넌트가 발생시킨 이벤트를 청취하여 연결된 핸들러 함수 호출

-> 함수의 인자로 전달된 데이터가 포함되어 있음

 

 

 

 

 

 

 

 

빼빼로데이 챙기는 귀여운 어른들,,,피식,,ㅎ

+ 프로젝트 팀 정해졌당! 팀명 최김박,, 얼마나 깔깔대면서 할지 기대중,, 플젝하면서 웃음치료까지?