[Vue] props로 데이터 전달하기

 

리액트에 익숙해져있고, vue를 독학해서 사용해보니 

 

아직 어색해서... 컴포넌트로 props를 전달할 때는 어떻게 하나 찾아보다가 까먹을까봐 작성함

 

 

1. CreditCart 컴포넌트

<template>

  <div class="flex flex-col justify-between credit-content p-8">

    <p class="text-3xl font-PretendardBold">{{ price }} 원</p>

    <div>

      <p class="text-lg text-gray-500">총 {{ count }}건 발송가능합니다</p>

      <p class="text-lg text-gray-500">1건당 15원에 결제가능합니다</p>

    </div>

    <div class="flex justify-between">

      <p class="text-2xl font-PretendardSemiBold">{{ credit }} 크레딧</p>

      <div

        class="flex justify-center items-center font-PretendardSemiBold w-16 h-8 rounded-2xl bg-lightBlue text-darkPurple"

      >

        + 10%

      </div>

    </div>

    <div class="p-4 bg-lightGray2 h-20">

      <div class="flex justify-between w-full">

        <div>기본 크레딧</div>

        <div>{{ basic }}</div>

      </div>

      <div class="flex justify-between w-full">

        <div>추가 크레딧</div>

        <div>+ {{ add }}</div>

      </div>

    </div>

    <button

      class="w-full h-16 bg-buttonPurple2 rounded-lg my-2 text-xl text-white"

    >

      구매하기

    </button>

  </div>

</template>

<script>

export default {

  props: {

    price: {

      type: String,

    },

    count: {

      type: String,

    },

    credit: {

      type: String,

    },

    basic: {

      type: String,

    },

    add: {

      type: String,

    },

  },

};

</script>

<style></style>

 

script의 props에 부모컴포넌트에서 props로 받을 데이터 type 과 이름 작성 default값도 작성가능함

 

{{}} 를 사용하여 

바인딩 가능

 

 

2. 부모 컴포넌트

자식 컴포넌트 import 후 전달하고자 하는 데이터를 props로 전달하면됨

        <CreditCard

          price="10,000"

          count="76,667"

          credit="110,000"

          basic="100,000"

          add="10,000"

        />

      </div>

    </div>

  </div>

</template>

<script>

import CreditCard from "../components/CreditCard.vue";

export default {

  components: {

    CreditCard,

  },

};