Vue3 Provide / Inject 정리

컴포넌트끼리 값을 공유하는 방법

1. props
2. storage
3. 상태 관리 라이브러리

 

props 이용해서 최상위 component에서 최하위 component로 정보를 props를 이용해서 보내는 것은 너무나도 비효율적입니다. 그러나

storage, 상태 관리 라이브러리를 이용하기에는 애매한 경우가 있습니다. vue는 이러한 상황을 해결하기 위해 provide/inject개념을 만들게 되었습니다.

 

 

Provide / Inject란?

provide는 값을 제공하는 역할

Inject는 제공받은 값을 component에 추가하는 역할

 

사용방법

parents

 

<template>
  <div class="home">
    <input type="text" v-model="test2" />
    <TestComponent />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import TestComponent from "@/components/test.vue";
@Options({
  provide() {
    return {
      test: this.test2,
    };
  },
  data() {
    return {
      test2: "etst2",
    };
  },
  components: {
    TestComponent,
  },
})
export default class Home extends Vue {}
</script>

child

<template>
  <div>{{ test }}</div>
</template>
<script>
import { Vue, Options } from "vue-class-component";

@Options({
  inject: ["test"],
})
export default class Test extends Vue {}
</script>

 

*provide 값을 반드시 변수값으로 할 필요는 없습니다.

 

 

이렇게만 보면 엄청나게 편리한 기능이라고 느껴집니다.

귀찮게 props 설정하고 ts면 type 설정해주는 귀찮은 일을 안 해도 되게 해 주니 말이죠!

 

 

그러나 공식문서에서는 일반적인 application에서의 사용을 권장하지 않습니다.

 

 

왜?

앞에서도 말했지만 귀찮은 작업을 줄여준다고 했습니다. 다르게 말하자면 provide를 어디서 했는지를 파악하기가 힘들어진다는 것입니다. 물론 간단한 application인 경우에는 크게 문제가 되지 않지만 구조가 조금만 복잡해도 파악하기 힘들어지기 때문입니다.

vuex랑 뭐가 다른 건가?

vuex

• 위치에 상관없이 값을 가져올 수 있음
• 값이 반응적으로 변화함

provide

• 자식 components만이 값을 가져올 수 있음
• 값이 반응적으로 변화하지 않음

참고자료

[Vue.js] provide/inject 에 대해 알아보기