[Vue.js] 06.2 컴포넌트끼리의 통신

지난 글에서 부모에서 자식 컴포넌트로 데이터를 내려주는 props에 대해 작성하였는데!...

props의 단점은 계층구조가 복잡해지면 복잡해 질 수록~~

전달의 전달의 전달 자체가 복잡해 진다는것...ㅠ

 

이럴때 쓰는것이 Provide(상위)/Inject(하위)

 

상위 컴포넌트에서

...
  provide: function () {
    return {
      testProvide: 'testValue'
    }
  },
...

작성하고

 

하위 컴포넌트에서

...
  inject: ['testProvide'],
  mounted () {
    console.log(this.testProvide)
...

위 처럼 작성하면 됨!

계층 구조에 관계없이 순서만 맞으면 inject로 사용 가능하긴한데...

단점은 어떤 상위 컴포넌트에서 오는 데이터인지 알 수 없다는 점!

 

모르면 파일내 찾기라는 방법이 있징!!

혹은 컴포넌트를 알 수 있는 어떤 id라던가? 그런걸 옵션에 지정해 주면 어떨런지?