vue3) props 전달 방법

🔸문제상황

 

- form 안에 label 과 input 이 반복되어 label 과 input을 공통 컴포넌트로 분리하려고 한다.

<form action="" class="">
    <label for="productName">상품명 </label>
    <input
      type="text"
      id="productName"
      placeholder="15자 이내로 작성"
      v-model="product.name"
    />
    <label for="productDesc">설명 상세 </label>
    <input
      type="text"
      id="productDesc"
      placeholder="50자 이내로 작성"
      v-model="product.description"
    />
    <label for="productPrice">상품가격 </label>
    <input
      type="text"
      id="productPrice"
      placeholder="10만원 이하만 입력"
      v-model="product.price"
    />
    <button
      type="button"
      @click="handleSubmitProductForm"
      class="register__btn"
    >
      상품 등록
    </button>
  </form>

 

🔸Props 생성 방법

- 우선 자식 컴포넌트를 생성하고 props 로 받아올 것들을 지정한다.

type 과 default 를 설정할 수 있다.

// src/components/common/FormInput.vue

<template>
  <label :for="inputId">{{ labelText }}</label>
  <input
    :type="type"
    :id="inputId"
    :placeholder="placeholder"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: {
    inputId: {
      type: String,
      default: ''
    },
    labelText: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '내용을 채워주세요'
    },
    modelValue: {
      default: ''
    }
  }
}
</script>

<style scoped>
label {
  margin: 10px;
  font-size: large;
  font-weight: bold;
}
input {
  width: 200px;
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}
</style>

 

 

- 부모 컴포넌트를 생성해서 props 속성명과 넘겨줄 값을 적는다.

 

이때,아래 사항을 유의해서 넘겨주자

<ChildComp userName='Jennie'/> // 이런식으로 :이 없는 것은 문자열 데이터를 그대로 전달하는 방식이다.
<ChildComp :userName='username'/> // : 이 있는건 변수를 바인딩 하기위한 표현식이다.

 

그리고 나서 component 를 import 해온 후에 components:{FormInput} 과 같이 컴포넌트를 등록한다.

  <template>
  <FormInput
      inputId="productPrice"
      labelText="상품가격"
      placeholder="10만원 이하만 입력"
      v-model="product.price"
    />
   </template>
   
    <script>

    import FormInput from '../components/common/FormInput.vue'

    export default {
      components: {
        FormInput
      },
      setup() {
      //중략
        }
        return {
        //중략
        }
      }
    }
    </script>

 

 

❓v-model 을 props로 넘기는 방법

 

아래와 같은 소스는

 <Comp v-model="first"/>

아래와 같이 컴파일러에 의해 변환됨.

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

자식 컴포넌트에서는 이를 대비한 구현을 해줘야 함

<script setup>
import {computed} from 'vue';
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

출처: https://itchallenger.tistory.com/821 [Development & Investing:티스토리]