Vue의 제공/주입은 상위 구성 요소가 계층별로 소품을 전달하지 않고도 하위 구성 요소에 데이터를 전달할 수 있도록 하는 종속성 주입 메커니즘입니다. 제공/주입을 통해 다음 기능을 달성할 수 있습니다.
-
전역 상태 관리 : 루트 구성 요소에서 제공을 사용하여 데이터를 제공함으로써 다른 하위 구성 요소가 주입을 통해 이 데이터를 주입할 수 있습니다. 이를 통해 전역적으로 공유된 상태 관리를 달성하고 props를 통해 데이터를 전달하는 번거로움과 계층적 중첩의 제한을 피할 수 있습니다.
-
교차 레벨 통신 : 교차 레벨 컴포넌트 간 통신은 제공/주입을 통해 이루어질 수 있으며, 상위-하위 컴포넌트 관계를 통해 데이터를 전달할 필요가 없습니다. 이는 관련되지 않은 구성 요소 간의 통신에 매우 편리합니다.
-
플러그인 확장 : 제공/주입을 통해 플러그인 또는 타사 라이브러리의 일부 인스턴스를 구성 요소에 주입하여 구성 요소가 이러한 기능을 직접 사용할 수 있습니다. 이를 통해 구성 요소와 플러그인을 분리하고 구성 요소의 재사용성을 향상할 수 있습니다.
-
테마 구성 : 테마 구성 데이터를 제공/삽입을 통해 컴포넌트에 주입할 수 있으므로 구성에 따라 컴포넌트가 표시 스타일을 맞춤 설정할 수 있습니다.
-
라우팅 정보 공유 : Provide/Inject를 통해 라우팅 정보를 하위 구성요소에 주입하여 하위 구성요소가 경로, 매개변수 등 현재 라우팅 정보에 접근할 수 있도록 합니다.
전반적으로 제공/주입은 데이터 공유, 레벨 간 통신 및 구성 요소 간 플러그인 확장을 실현할 수 있어 보다 유연하고 편리한 종속성 주입 방법을 제공합니다.
1. vue2
Vue 2에서는 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하기 위한 한 쌍의 옵션이 있습니다 provide.inject
하위 구성 요소에서는 상위 구성 요소 가 전달한 데이터를 inject속성을 통해 수신하여 크로스 레벨 구성 요소 간의 통신을 달성할 수 있습니다.provide
예:
상위 구성요소에서:
<template>
<div>
<ChildComponent></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
name: 'John'
};
}
}
</script>
하위 구성요소에서:
<template>
<div>
<p>My name is {
{ injectedName }}</p>
</div>
</template>
<script>
export default {
inject: ['name'],
computed: {
injectedName() {
return this.name;
}
}
}
</script>
2. vue3
Vue 3에서는 provide및 의 사용법은 inject여전히 동일하지만 중요한 변경 사항이 있습니다. Vue 3에서는 반응형 데이터 전송을 사용 provide하고 inject달성할 수 있습니다.
예:
<template>
<div>
<ChildComponent></ChildComponent>
</div>
</template>
<script>
import {
provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const name = ref('John');
provide('name', name);
}
}
</script>
하위 구성요소에서:
<template>
<div>
<p>My name is {
{ injectedName }}</p>
<button @click="changeName">Change Name</button>
</div>
</template>
<script>
import {
inject } from 'vue';
export default {
setup() {
const name = inject('name');
const changeName = () => {
name.value = 'Bob';
};
return {
name,
changeName
};
},
computed: {
injectedName() {
return this.name;
}
}
}
</script>
위의 예에서 상위 구성 요소는 를 통해 하위 구성 요소에 provide응답 name데이터를 전달합니다. 하위 구성 요소는 를 inject통해 이 데이터를 수신하고 변경할 수 있습니다. 하위 구성 요소가 name값을 변경하면 상위 구성 요소의 값 name도 그에 따라 변경됩니다. 즉, 반응형 데이터 전송이 이루어집니다.