[VUE] provide & inject

만약 DeepChild에서 Root(main)의 데이터를 props 받고 싶을 때,
footer을 거쳐서 DeepChild에 props를 해야하지만
provide와 inject를 쓰게되면 footer을 거치지 않고 바로 props 할 수 있다.

Provide

export default {
  data() {
    return {
      message: '안녕!'
    }
  },
  provide() {
    return {
      message: this.message
    }
  }
}

//data()에 있는 변수를 provide에서 쓰는 방법

Inject

export default {
  inject: ['message'],
  data() {
    return {
      // 주입된 값을 기반으로 하는 초기 데이터
      fullMessage: this.message
    }
  }
}

Inject에서 받는법