Vue 3의 슬롯을 통해 V-모델 보내기

Vue 3(또는 Vue 2)의 슬롯을 통해 v-model를 보내려고 시도하면 기본적으로 불가능하다는 것을 매우 빨리 알게 됩니다. 그러나 해결 방법이 있습니다.

다음 코드 예제를 사용하면 부모에서 SlottedComponent의 내부 상태를 업데이트할 수 있습니다. 이는 구성 요소 소비자가 내부 상태의 스타일을 지정하거나 제어할 수 있도록 하려는 경우에 유용합니다.

슬롯 구성 요소:

<template>
  <slot
    :input-value="inputValue"
    :update-input-value="updateInputValue"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const inputValue = ref('')
  const updateInputValue = (event: Event) => {
    inputValue.value = (event.target as HTMLInputElement).value
  }
</script>

상위 구성 요소에서:

<template>
  <SlottedComponent>
    <template #default="{ inputValue, updateInputValue }">
      <input
        type="text"
        :value="inputValue"
        @keyup="updateInputValue"
      >
    </template>
  </SlottedComponent>
</template>

여기서 핵심은 슬롯 경계를 넘을 수 없기 때문에 일반적으로 하는 것처럼 부모의 입력 요소에서 v-model에 바인딩된 inputValue를 직접 설정할 수 없다는 것입니다. 그러나 입력의 value를 inputValue로 설정하고 @keyup와 같은 이벤트를 호출하여 모든 변경 사항을 SlottedComponent로 다시 보낼 수 있습니다.

도움이 되었기를 바랍니다. 좋은 하루 되세요.