Intro

하나의 view를 가정하고 만든 youtube 검색 프로젝트를 위한 개념을 공부하겠습니다.

따라서 라우트는 만들지 않을거에요.
아래의 컴포넌트 구성대로 vue 프로젝트를 진행하겠습니다.

이런 구조로 프로젝트를 구성하려면 컴포넌트는

다음과 같은 구조로 구성되어야 합니다.
이때 각각의 컴포넌트는 상위의 컴포넌트를 거쳐야 합니다. 이런 개념을 보다 자세하게 공부해보겠습니다.

🔵 Pass Props & Emit Events

• Front-End 개발은 사용자에게 데이터를 보여주고 데이터와 상호 작용하는 과정이므로 data를 잘 관리하는 것은 매우 중요하다!

데이터 관리

규모가 커지고 그에 따른 컴포넌트의 숫자가 증가하면, 어떤 컴포넌트에서 어떤 데이터를 관리하는 지 파악하기가 매우 어려워 진다.
Vue에서는 모든 데이터를 부모와 자식 컴포넌트 사이의 단방향으로 내려가는 바인딩의 형태로 관리하기 때문에, 부모의 속성(데이터)가 변경되면 자식속성에서 자동으로 전달된다.
💥하지만 자식의 속성이 변경되는 것은 부모속성에게 전달되지 않는다!!💥

부모←→ 자식 : 부모→자식

Pass Props(properties)

데이터를 내렬줄 때 v-bind 디렉티브를 활용합니다. (숏컷 :)
:video="video"의 형태를 많이 사용하는데,

왼쪽 :video는 자식 컴포넌트로 내려 줄 이름
오른쪽 "video" 는 부모 컴포넌트에서 사용할 데이터

부모←→자식 : 부모 ← 자식

Emit Eventes

자식의 데이터가 변경되어도 부모의 데이터는 변화하지 않아요.
그래서!
자식은 부모에게 이벤트와 함께 전달하고 싶은 데이터를 함께 넘겨야 합니다

this.$emit('사용자가 직접 지정하는 이벤트 이름' , 넘길데이터1, 넘길데이터2, ...)

사용자가 지정하는 이벤트는 주로 kebab-case의 형태로 작성하며 데이터를 넘기는 것은 넘기는 개수에 제한이 없습니다. (Dev Tools에서는 넘어가는 데이터를 payload라는 이름으로 표현합니다.