[Vue.js] props를 사용한 부모-자식 컴포넌트 통신법

props 간략 설명

props는 Vue에서 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달을 하기 위해 사용되는 문법임

자식 컴포넌트에 데이터를 전송하면 자식 컴포넌트에서 해당 데이터를 사용할 수 있게 됨

 

Vue.js 데이터 전송 : 부모 -> 자식(props) 사용법

부모 컴포넌트 -> 자식 컴포넌트

데이터 전송을 위한 props 3스텝

① 보내고 (export)  ② 등록하고 (import) ③ 쓰면 됨 

 

① 부모 컴포넌트

  // Vue.app
  
 <Card :productsData="productsData" />   // 태그:작명 = "하단의 데이터 이름"

<Card :임의로 작명 = "하단 데이터 이름">

 

②  자식 컴포넌트

// Card.vue

export default {
    name : 'cardComponent',
    props : {
        productsData : Array, // 작명한 데이터명 : 자료형
    }
}

props에 부모 컴포넌트에서 작명했던 { 데이터명 : 자료형 } 입력

 

③ 부모 컴포넌트

  // Vue.app
  
  components:{
    Discount : Discount,
    Modal : Modal,
    Card : Card, // 
  },

 

 

props 다양한 데이터 유형 전달 하기

<Card :데이터명="[1,2,3]"> // 배열 데이터 전달
<Card :데이터명="{age:20}"> // 객체 데이터 전달
<Card :데이터명="100"> // 숫자 데이터 전달
<Card 데이터명="ㅎㅇ"> // 문자 데이터 전달

배열, 객체, 숫자, 문자열과 같은 다양한 데이터 유형을 전달할 수 있음

 

단 불리언(true/false) 값은 문자열로 전달해야 함. 불리언 값은 문자열로 반환하면 사용할 수 있음

- props는 읽기 전용 데이터(read-only)로 취급. 수정하면 에러 뜸

 

배열 데이터를 자식 컴포넌트에 전송하려면

// Vue.app

export default {
  name: 'App',
  data(){
    return {
      fruits: ["사과", "바나나", "딸기", "포도"], // Array 자료
    }
  },

  // Vue.app
  
<fruitsBox :items="fruits" />

<자식 :작명="하단에 정의된 배열명">

- 작명은 자식 컴포넌트에서 사용할 데이터 이름이고 임의로 작성 가능

- 배열명은 하단에 정의된 배열의 이름을 붙이면 됨

 

오브젝트 데이터를 자식 컴포넌트에 전송하려면

// Vue.app

export default {
  name: 'App',
  data(){
    return {
      Person : { name:'kim', age:20 }, // 오브젝트 자료
    }
  },

  // Vue.app
  
  <Card :이름="Person.name" :나이="Person.age" />

<자식 :작명="오브젝트명.속성" :작명="오브젝트명.속성">

- 작명은 자식 컴포넌트에서 사용할 데이터 이름이고 임의로 작성 가능

- Object 자료형에서 원하는 속성만 전송하고 싶으면 이렇게 전송하면 될 듯

 

  // Vue.app
  
  <Card v-bind="Person" /> // Object 데이터를 한번에 전송

<자식 v-bind="오브젝트명"/>

- Object 자료형을 통째로 전송하고 싶으면 이렇게 전송하면 될 듯

 

위 예시에서 결과적으론 Object 자료형의 데이터가 모두 전송됨