Vue에서 기본 주입/제공 값을 설정하는 방법

Vue는 프로퍼티를 사용하지 않고 여러 수준으로 데이터를 전송하는 방법으로 제공 및 주입을 사용합니다. 하지만 주입된 데이터에 대해 기본값을 설정할 수 있다는 것을 알고 계셨나요? 어떻게 작동하는지 살펴보겠습니다.

Vue에서 제공 및 주입으로 기본값 설정

확실하지 않은 경우how provide and inject work, you can read about it here . 기본적으로 inject는 provide 키에 대해 기본값이 설정될 것으로 예상하며 그렇지 않은 경우 런타임 오류가 발생합니다. 따라서 런타임 오류가 발생하지 않도록 기본값을 설정하는 것이 좋습니다.

예를 들어 보겠습니다. 다음과 같이 부모의 일부 데이터provide를 가정해 보십시오.

<script setup>
    import { provide, ref } from 'vue'
    const message = ref('message');
    provide('myKey', message);
</script>

그런 다음 어딘가에 주입하면 두 번째 인수를 사용하여 기본값을 설정할 수 있습니다. 예를 들어:

<script setup>
    import { inject } from 'vue'
    const message = inject('myKey', 'the default value')
</script>

이 예에서 myKey를 찾을 수 없으면 대신 기본값이 the default value로 설정됩니다. 다음과 같이 Options API를 사용하여 동일한 작업을 수행할 수 있습니다.

export default {
    inject: {
        message: {
            myKey: 'the default value'
        }
    }
}

Vue에서 인젝터의 기본값을 설정하는 것이 모범 사례이며 예기치 않은 런타임 오류를 방지하는 데 도움이 됩니다. To learn more about Vue, click here .