Vue.js 시작하기_컴포넌트 2

=====================컴포넌트 통신방법 ==========================================

 

------------------------------------기본컴포넌트 통신-------------------------------------------------------------------------

* 컴포넌트 통신방식 (Componets Communication)

뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖음 .

따라서 컴포넌트 간에 데이터를 주고 받기 위해서는 규칙을 따라야함 

 

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

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

------------------------------------기본컴포넌트 통신방법(통신규칙이 필요한 이유)----------------------------------------

 

데이터의 흐름을 추적할 수 있음 

------------------------------------기본컴포넌트 통신방법(기본_Props속성)-------------------------------------------------

 

 

 

 

------------------------------------기본컴포넌트 통신방법(기본_Props속성의 특징)-------------------------------------------

message 부분을 고치고  AppHeader 부분으로 내려왔을 경우

AppHeader의 data 부분도 바뀌는 것을 볼수 있습니다.  Reactivity의 것임을 알 수 있습니다.

---------------------------------------------------기본컴포넌트 실습-----------------------------------------

 

#문제 :  props를 이용하여 10이 나올수 있도록 하기 

-------------수업 답안-------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------

 

결과 

이렇게 나오는 것을 볼 수 있습니다.

------------------------------------기본컴포넌트 통신방법(기본_event emit)-------------------------------------------

새로운 파일을 생성하기

이런식으로 화면이 나온것을 보실수 있습니다.

 

버튼에 이벤트를 주는 것임

이런식으로 click me를 클릭을 하게  되면 event 창에서 보면 어떻게 나오는지 알수 있습니다. 

지금 이벤트를 두번을 눌러서 두개가 나온 상황입니다.

------------------------------------기본컴포넌트 통신방법(기본_event emit 콘솔 창에 출력하기)----------------------------

------------------------------------기본컴포넌트 통신방법(기본_event emit 실습)-------------------------------------------

# num의 값을   2를 증가시키는 것을 해보십쇼

------------------------------------답--------------------------------------------------------------------------------------------

2씩 증가하는 것을 보실수 있습니다.

add를 클릭하였을 경우 

------------------------------------컴포넌트 통신방법(기본뷰 인스턴스에서의 this)-------------------------------------------

Console창에서 실행합니다.  console에서 한칸 뛰기는 shift+ enter누르시면 됩니다.

 

저장한 뒤 console창에 들어가서 찍어보면 Num이 나오는 것을 볼수 있습니다.

this.num 은 data의 num을 볼 수 있다.

/*

생성자 공부를 위한 링크 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function

*/