[Vue3] v-model 삽질기 (양방향 통신)

이슈

출처: https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax

위에는 vue3 공식문서에 있는 내용인데 이걸 제대로 이해하지 않고 넘어가서 삽질을 했다..
v-bind는 단방향통신, v-model은 양방향 통신이라는걸 알고있으면서도 저걸 대충 보고 v-bind하면 컴포넌트에서 emit으로 update:modelValue하면 되는구나~ 하고 시작했는데 watch를 걸어놔도 값이 변경되는게 감지가 되지 않았다.

 

기존에 내가 생각했던 내용

 

부모 컴포넌트	자식 컴포넌트
resetData이라는 데이터를 reset이라는 이름으로 전달	reset이라는 props로 전달받음
resetData를 바꾸면 알아서 자식컴포넌트에 전달될것이라 생각	여기서 값을 바꾸고 싶으면 emit해서 하면된다고 생각
v-model:reset="resetData" 이거랑 :reset="resetData" 이렇게 쓰는거랑 같게 바뀌었다고 생각.	emit('update:reset', 값)
watch를 통해서 emit에서 변경된 값을 감지할 수 있다고 생각.

 

 

다시 이해한 내용

부모 컴포넌트	자식 컴포넌트
resetData이라는 데이터를 reset이라는 이름으로 전달	reset이라는 props로 전달받음
resetData를 바꾸면 알아서 자식컴포넌트에 전달될것이라 생각	여기서 값을 바꾸고 싶으면 emit해서 하면된다고 생각
v-model:reset="resetData" 는 아래처럼 v-bind와 v-on을 합쳐놓은 것과 같다. :reset="resetData" @update:reset="resetData = $event" @update:reset 이때 바뀐게 watch처럼 감지가 된다.	emit('update:reset', 값)
물론 아래처럼 $event를 이벤트로 넘겨서 쓸수 있다. @update:reset="updateReset($event)"
만약 이름을 지정하고 싶지 않다면 v-model="resetData" 또는 :modelValue="resetData" @update:modelValue="resetData = $event" 이렇게 쓸 수 있다.

따라서 포인트는 v-model="데이터" 하나로 관리하던가
:title="데이터" + @update:title="데이터 = $event" 로 쪼개서 쓰던가였다.
정리하고 보니 당연한건데 왜 그랬나.. 오늘의 삽질일기..