Vue의 ModelValue 파헤치기

:modelValue

• v-model은 양방향 바인딩 컴포넌트다.
• vue3는 내부적으로 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 Props를 수정 할 수 있게 했다.
  • props는 기본적으로 readOnly reactive object이다.

<input v-model="first"/>

• 위의 소스코드는 컴파일러에 의해 아래와 같이 변한된다.

<input :value="first" @input="first = $event.target.value"/>

• 해당 기능을 컴포넌트에 적용 시키면 다음과 같이 변경된다.

<CustomInput
  :modelValue="first"
  @update:modelValue="newValue => first = newValue"
/>

• 코드

  부모 Component

    <script>
      import CustomInput from './CustomInput.vue';
  
      export default {
        component: {CustomInput},
        data() {
          return {
            first: 'Hello'
          }
        }
      }
    </script>
  
    <CustomInput v-model="first" />

  자식 Component

    <!-- CustomInput.vue -->
    <script>
      export default {
        props: ['modelValue'],
        emits: ['update:modelValue']
      }
    </script>
  
    <template>
      <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
      />
    </template>

• 참고 Reference

  Component v-model | Vue.js