Vue에서 제공 및 주입이 작동하는 방식

Vue에서 하위 요소에 소품 또는 속성을 제공/제공하는 것은 쉽습니다. Properties in Vue은 상위 요소 또는 vue 템플릿에서 하위 요소로 데이터를 전달할 수 있는 주요 방법 중 하나입니다. 예를 들어, 아래 코드에서 자식 요소PopularList에 name 속성을 부여하고 Most Popular Posts 로 설정합니다. 즉, PopularList가 이제 데이터Most Popular Posts에 액세스할 수 있습니다.

<PopularList name="Most Popular Posts" />

그러나 때로는 하위 요소에 다른 하위 요소가 포함될 수 있습니다. 부모 구성 요소에서 손자 구성 요소로 데이터를 전달하려는 경우 이를 수행하는 더 쉬운 방법은 제공/주입입니다. 이를 통해 상위 수준에서 데이터를 제공하고 그 아래의 모든 수준에 데이터를 주입할 수 있습니다.

즉, 자식이 사용하지 않고 손자가 사용하는 속성이 있는 경우 Parent → Child → GrandChild와 같이 불필요하게 둘 다 전달할 필요가 없습니다. 대신 간단히 Parent → Grandchild로 전달할 수 있습니다. 아래 그림과 같이:

Vue에서 제공 및 주입을 사용하는 방법

컴퍼지션 API를 사용하는 경우 provide 함수를 사용하여 모든 데이터 세트를 수행할 수 있습니다provide.

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

provide에는 키와 값이 모두 있습니다. 위에서 키는 myKey 이고 값은 message 입니다. 소품과 마찬가지로 객체, 숫자 또는 기타 유효한 유형이 될 수 있습니다. 또한 이 속성을 반응형으로 만들 수 있으므로 ref 함수를 사용하여 손자 요소에서 최신 상태를 유지합니다.

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

옵션 API를 대신 사용하는 경우 다음 구조를 사용하여 구성 요소에 데이터를 제공할 수 있습니다.

export default {
    provide: {
        myKey: 'message'
    }
}

provide에서 옵션 API 버전의 반응성을 원하면 computed를 사용해야 합니다. 따라서 컴포지션 API는 provide/inject 와 함께 사용하기가 좀 더 간단합니다. 또한 인스턴스별 상태를 제공하는 경우(즉, 데이터가 provide() 함수에서 오는 경우) data() 표기법을 사용해야 합니다.

export default {
    data() {
        return {
            message: 'message'
        }
    },
    provide() {
        return {
            // This sets `myKey` to the message property from data().
            // Putting it in `computed()` makes it reactive.
            myKey: computed(() => this.message)
        }
    }
}

이제 데이터를 제공했으므로 inject 함수를 사용하여 모든 수준의 모든 자식 구성 요소에서 데이터에 액세스할 수 있습니다.

Vue에서 주입을 사용하여 상위 데이터에 액세스

이제 구성 요소에서 provide를 정의했으므로 inject를 사용하여 해당 데이터에 액세스할 수 있습니다. 자식 구성 요소 또는 손자 구성 요소에서 myKey를 참조하기 위해 message에 액세스할 수 있습니다. 예를 들어 다음과 같은 Vue 구성 요소가 있다고 가정합니다.

<script setup>
    import { ref, provide } from 'vue'
    import ChildElement from './Child.vue';
    const message = ref('message');
    provide('myKey', message);
</script>
<template>
    <p>Hello World!</p>
    <ChildElement />
</template>

... 그리고 다음과 같은 자식 요소( Child.vue ):

<script setup>
    import GrandChildElement from './GrandChildElement.vue';
</script>
<template>
    <GrandChildElement />
</template>

GrandChildElement 내에서 myKey 에 액세스할 수 있습니다. Child.vue 에서도 이 작업을 수행할 수 있지만 소품을 사용할 수도 있습니다. provide는 여러 수준에서 데이터를 가져올 수 있는 기능을 제공합니다. GrandChildElement에서 이 데이터에 액세스하려면 inject를 사용합니다. GrandChildElement.vue 파일은 다음과 같이 보일 수 있습니다.

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

const message 여기서 message 텍스트를 반환할 것입니다. 그것이 우리가 myKey 를 provide 로 설정했기 때문입니다. 옵션 API를 사용하는 경우 대신 다음을 수행할 수 있습니다.

export default {
    inject: [ 'myKey' ],
    created() {
        // Can access this.myKey here
    }
}

이제 myKey 값을 props를 통해 자식에게 먼저 전달할 필요 없이 손자 컴포넌트에서 사용할 수 있습니다.