[Vue3.js] v-model 단방향과 양방향 바인딩의 차이점

강의를 듣던 도중 대충 들어서 그런가 헷갈리는 부분이 있어서 정리하러 왔다.

 

<Component :title="title" />

<Component v-model:title="title" />

 

두 컴포넌트에 props data 넘겨주는 차이점을 잘 모르겠었다.

 

1. 단방향

:title="title"

• title 이라는 prop에 부모 컴포넌트의 title 데이터를 단방향으로 전달 함.
• 즉 부모 ➡️ 자식 데이터 흐름만 가능함.

 

 

2. 양방향

v-model:title="title"

• v-model을 사용해 title과 자식 컴포넌트의 prop title을 양방향으로 바인딩 함.
• 즉 부모 ↔️ 자식 간의 데이터 흐름이 가능함.

 

3. 차이점

특성	단방향 (:title="title")	양방향(v-model:title="title")
데이터 흐름	부모 ➡️ 자식	부모 ↔️ 자식
부모 데이터 변경 반영	자식에서 값 변경 시 반영되지 않음	자식에서 값 변경 시 부모 데이터 자동 업데이트
자식에서 값 업데이트 방법	불가능	emit 필요