[Vue3] <script setup> Props 사용방법

ChanSol Jeong·2023년 6월 25일

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  propA: String,
  propB: {
    type: Number,
    default: 0
  }
});
</script>```

Composition API에서 props를 사용하려면 defineProps를 이용하여 선언해주어야한다.

props를 지정해줄 때는 type을 같이 지정해주는 것이 좋고,
default를 이용하여 기본값을 지정해줄 수 있다.

하위 컴포넌트에서는 props의 값을 직접 변경하지않는 것이 좋으므로
만약 하위 컴포넌트에서 props값으로 반응성을 추가하여 사용하고 싶다면 아래와 같이 사용할 수 있다.

const propA = ref(props.propA)
profile
Compostion API 맛있다!

0개의 댓글