[Vue3] props - 2

1️⃣ Props로 다양한 데이터 전달하기

props를 통해 문자, 숫자, 배열, 객체 등 원하는 데이터를 직접 전달할 수 있습니다.

props 보내는 여러가지 방법

<!-- 배열 전달 -->
<Discount :데이터이름="[1,2,3]" />

<!-- 객체 전달 -->
<Discount :데이터이름="{ age: 20 }" />

<!-- 숫자 전달 -->
<Discount :데이터이름="100" />

<!-- 문자열 전달 (콜론이 없으므로 무조건 문자열) -->
<Discount 데이터이름="안녕하쇼" />

• 주의:
  • 콜론(:)을 붙이면 자바스크립트 표현식으로 평가되어 배열, 객체, 숫자 등이 그대로 전달됩니다.
  • 콜론이 없으면 값은 문자열로 전달됩니다.

---

2️⃣ 객체를 개별 props로 보내는 방법

하나의 객체 { name: 'kim', age: 20 }에서 각각의 프로퍼티를 따로 props로 보내고 싶다면 아래와 같이 작성할 수 있습니다.

<!-- 각각 객체의 프로퍼티를 개별 props로 전달 -->
<Discount :name="오브젝트.name" :age="오브젝트.age" />

하지만 매번 하나씩 적는 것이 번거롭다면 v-bind를 활용하여 객체 전체를 한 번에 전달할 수 있습니다.

<!-- 객체의 모든 프로퍼티를 한꺼번에 전달 -->
<Discount v-bind="오브젝트명" />

Tip: 단순히 객체 전체를 보내는 것이 가장 간단한 방법입니다.

---

📌 정리

• props 전달:
  • 문자, 숫자, 배열, 객체 등 다양한 자료형을 직접 전달 가능
  • 콜론(:) 사용 유무에 따라 전달되는 데이터 타입이 달라집니다.
• 객체 전달:
  • 개별 프로퍼티로 전달하거나, v-bind를 이용해 객체 전체를 한 번에 전달할 수 있습니다.