Vue에서 Props 기본값을 지정하는 방법

Vue에서 구성 요소를 사용할 때 종종 properties or props을 사용하여 사용자 지정 데이터 조각을 하위 구성 요소로 전달합니다. 예를 들어, 이 버전의 구성 요소에 대해 "name"이 "my-component"로 설정되었음을 자식 구성 요소에 알릴 수 있습니다.

<Component name="my-component" />

name prop 없이 이 구성 요소를 호출하려고 하면 코드에서 undefined를 반환하거나 HTML로 렌더링할 때 텍스트가 없는 것처럼 반환합니다. Component가 다음과 같다고 가정해 보겠습니다.

<script>
export default {
    props: {
        name: String
    },
    mounted() {
        console.log(this.name);
    }
}
</script>

<template>
    <p>
        Hi {{ name }}
    </p>
</template>

모든 구성 요소는 name 유형의 String라는 소품을 정의하고 콘솔은 이 속성을 기록합니다. Hi {{ name }} 형식으로도 표시됩니다. 여기서 유일한 문제는 구성 요소가 호출될 때 name가 정의되지 않은 경우 기본 이름이 지정되지 않는다는 것입니다.

Vue에서 기본 소품 값 설정

Vue에서 기본 소품 값을 설정하는 것은 쉽습니다. Options API 을 사용하는 경우 속성을 개체로 확장하는 것만큼 쉽습니다. 예를 들어, name의 기본값이 "there"가 되도록 하려면 소품을 다음과 같이 업데이트합니다.

export default {
    props: {
        name: {
            type: String,
            default: "there"
        }
    },
    mounted() {
        console.log(this.name);
    }
}

이제 이름을 지정하지 않으면 메시지에 '안녕하세요'라고만 표시됩니다.

Composition API에서 기본 소품 값 설정

컴포지션 API에서 소품 정의는 defineProps 함수를 사용합니다. 이 함수는 옵션 API에 정의된 소품과 동일한 구문을 따릅니다. 기본값 없이 소품을 정의하는 것은 다음과 같습니다.

import { defineProps } from 'vue';

const props = defineProps({
    name: String
});

그런 다음 기본값을 추가하기 위해 이전과 마찬가지로 기본 속성을 갖도록 확장합니다name.

import { defineProps } from 'vue';

const props = defineProps({
    name: {
        type: String,
        default: "there"
    }
});

Vue에서 필요에 따라 소품 설정

속성에 기본값을 설정할 필요가 없도록 하려면 required 필드를 사용하여 속성이 필요하도록 강제할 수 있습니다. 예를 들어 name 속성을 정의하려면 간단히 required를 true로 설정하면 됩니다.

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

const props = defineProps({
    name: {
        type: String,
        required: true
    }
});
</script>