[vue] provide와 inject 알아보기

props drilling

props를 전달, 전달, 전달 해야하는 상황

provide와 inject는 props drilling을 해결하기 위해 나왔다.

Provide / Inject

상위에서 dependency provider를 만들고 어떤 descendant든 바로 줄 수 있도록 한다. 이때 inject키워드를 쓴다.

export default {
  provide: {
    message: 'hello!'
  }
}

provide는 app leve에서 할 수 있다.

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* key */ 'message', /* value */ 'hello!')

아래처럼 inject한다.

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // injected value
  }
}

Injection Aliasing / Default Value

1. component의 inject옵션을 object형식으로 달아주어 inject의 key를 임의로 변경할 수 있다.
2. inject는 상위에 어딘가에서 provided되었다고 생각하므로, 없으면 runtime에 warning을 낸다.

따라서 default value를 줄 수 있다.

<script>
export default {
  inject: {
    /* local key */ localMessage: {
      from: /* injection key */ 'message',
            default: 'default value'
    },
        user: {
      // use a factory function for non-primitive values that are expensive
      // to create, or ones that should be unique per component instance. 
            // ???? 무슨말인지 해석해줄사람..
      default: () => ({ name: 'John' })
    }
  }
}
</script>

 

 

 

 

 

 

참고

https://vuejs.org/guide/components/provide-inject.html#prop-drilling

Provide / Inject | Vue.js