[Vue] V-model : Vue2와 Vue3에서의 차이

• Vue2
  • Value prop을 전달하고, input 이벤트를 emit 하는 것
    • 부모 컴포넌트에서 데이터 prop을 통해 자식 컴포넌트로 데이터를 전달하고,
      그 데이터를 전달 받은 자식 컴포넌트는 이벤트 전달($emit)을 통해 다시 부모로 보내주는 구조

<ChildComponent :value="자식컴포넌트와 동기화 시킬 데이터 이름" @input="자식컴포넌트와 동기화 시킬 데이터 이름 = $event"/>
//v-model로 축약
<ChildComponent v-model="자식컴포넌트와 동기화 시킬 데이터 이름"></ChildComponent>

• Vue3
  • modelValue prop을 전달하고 update:modelValue이벤트를 emit하는 것과 같다.

<ChildComponent :modelValue="자식 컴포넌트로 보낼 데이터 이름" @update:modelValue="자식 컴포넌트로 보낼 데이터 이름 = $event"/>
//v-model로 축약
<ChildComponent v-model="자식 컴포넌트로 보낼 데이터 이름"/>