Vue 프로젝트를 하면서 각 컴퍼넌트 끼리 데이터 통신이 필요 해서 어떻게 데이터를 주고 받는지 궁금했습니다.
일단 부모 컴퍼넌트와 자식 컴퍼넌트가 있고 서로간에 데이터를 주는 방식이 달랐습니다.

props

먼저 부모에서 자식 컴퍼넌트에 데이터를 전달할 때 props를 사용하여 전해줍니다.
props에는 정적인 props와 동적인 props가 있습니다.

위 코드처럼 두가지 방식으로 데이터를 넘겨 줄수 있는데 동적으로 데이터를 보낼때 숫자나 배열또는 객체를 바로 보내 줄 수 있습니다. 아래에 예제 코드 ↓

자식 컴퍼넌트에서 부모값을 받는 방법은 배열로 받는 방법과 객체로 받는 방법이 있는데 오리마켓에서는 주로 객체로 데이터를 받아 바로 유효성 검사까지 할수 있도록 작업을 했습니다.
아래 코드의 2번과 3번 방식으로 작업을 했습니다.

emit

부모에서 자식 컴퍼넌트에 props로 데이터를 받았다면 다시 자식 컴퍼넌트에서 부모 컴퍼넌트로 데이터를 줘야 할 경우가 생기는데요.
그럴때 $emit을 사용하여 데이터를 보낼 수 있습니다.

위 코드 처럼 자식 컴퍼넌트에서 사이즈를 input에 입력하면 v-model을 사용하여 itemSize에 바인딩 되고 itemSize의 값이 바뀌면서 watch에서 $emit 이벤트를 실행하여 부모 컴퍼넌트로 데이터를 넘겨 줍니다. 그러면 부모 컴퍼넌트에서 getItemSize로 데이터를 넘겨 받습니다.