[vue.js] provide / inject

provide / inject

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

• props
• storage
• 상태 관리 라이브러리

props

provide / inject

 

props 이용해서 최상위 component에서 최하위 component로 정보를 보내는 건 비효율적

이러한 상황을 해결하기 위해 provide / inject 개념이 생김

provide 값을 제공하는 역할

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

<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",
    };
  },

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

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

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

why? 귀찮은 작업을 줄여주지만 provide를 어디서 했는지 파악하기 힘들어짐(구조가 복잡해지는 경우)