CodeHoon

안녕하세요 상훈입니다.

지난 포스팅에서 부모 -> 자식 v-model 값을 전달할 수 있게 코딩하는 것을 언급하였었는데,
오늘은 여러 개의 v-model 을 props 로 내려주는 내용을 포스팅 하려고 합니다.

2023.06.12 - [FrontEnd/Vue.js] - [ Vue.js ] Component 에 v-model 값 적용하기 1(이전포스팅)

필요요소: 부모컴포넌트, 자식컴포넌트

마찬가지로 부모컴포넌트와 자식컴포넌트가 필요합니다.

1. 부모컴포넌트

<script setup>
    import CustomInput from './CustomInput.vue'
    import {ref} from 'vue'

    const message = ref('')
    const message2 = ref('')
</script>

<template>
  메시지: {{ message }} <br/>
  메시지2: {{ message2 }} <br />
  <CustomInput v-model:message="message" v-model:message2="message2" />
</template>

자식 컴포넌트에 v-model 로 message, message2 를 각각 내려주었습니다.

2. 자식 컴포넌트

<script setup>
  const props = defineProps({
    message: String,
    message2: String
  })
  const emits = defineEmits(['update:message', 'update:message2'])
  
  const updateInputs = (e, type) => {
    emits(`update:${type}`, e.target.value)
  }
</script>

<template>
  <input
    :value="message"
    @input="updateInputs($event,'message')"
    style="margin-top: 20px;"
  /> 
  <textarea
    :value="message2" 
    @input="updateInputs($event,'message2')"
  ></textarea>
  
</template>

defineProps 로 message, message1 을 받아오기
defineEmits 로 emit 을 설정해주기
@input 태그 이벤트에 updateInputs 메서드를 연동.  값이 변할 때마다 부모 컴포넌트로 값 상신해주기

이중에서 핵심은 @input 이벤트 태그라고 생각합니다.

v-model 을 쪼개보면 위 이미지와 같이 쪼개지는 것을 알 수 있습니다.
v-bind -> value
@input -> event (user-custom-event)

결과

코드 공유 - Vue Playground

안녕하세요 상훈입니다.

Vue.js 3 - composition API 에서 특정 컴포넌트에 v-model 값을 내려주는 방법을 포스팅하도록 하겠습니다.

필요요소 : 부모컴포넌트, 자식컴포넌트

소스 확인(링크를 통해 작성한 내용 확인이 가능합니다)

1. 부모컴포넌트

<script setup>
    import CustomInput from './CustomInput.vue'
    import {ref} from 'vue'

    const message = ref('')
</script>

<template>
  메시지: {{ message }} <br/>
  <CustomInput v-model:message="message"/>
</template>

ref 로 message 를 선언 후
v-model 과 연동하여 자식 컴포넌트에 값을 내려준다.

2. 자식컴포넌트

<script setup>
  const props = defineProps({
    message: String,
  })
  const emits = defineEmits(['update:message'])
  
  const updateInputs = (e, type) => {
    emits(`update:${type}`, e.target.value)
  }
</script>

<template>
  <input
    :value="message"
    @input="updateInputs($event,'message')"
  /> 
</template>

props: defineProps 로 message 값을 받아온다고 선언
emit:  props로 받아온 message 를 키 값으로 update:message 로 상신할 것을 선언

method: updateInputs 에서 받아온 event 를 기준으로 value 를 emit 시켜주는 것을 확인 할 수 있다.

업무 중에 이전 소스에서 emit('update:input') 이라고 선언되어있길래 처음 보고, 이해가 안되어 공식문서를 찬찬히 살펴보게 되었다.

v-model 관련하여 문서를 찾아보게 되었고, component v-model 이라는 곳에서 확인할 수 있었다.

내용은 제대로 익히기 위해 playground에서 작성하였다.