상위 구성 요소에서 형식화된 참조를 제공하고 이를 하위 구성 요소에 삽입하려고 합니다.

제가 VueJS 문서를 이해했는지 잘 모르겠지만 이것이 제가 생각해낸 것입니다.

'vue'에서 유형 { Ref } 가져오기 'vue'에서 가져오기 유형 {InjectionKey } '@/types/DocumentSet'에서 DocumentSet 유형 가져오기 const documentSet = Symbol() as 주입키<{ documentSet: Ref
      
       , 업데이트: () => }> 기본 문서 세트 내보내기

따라서 작업은 형식화된 개체(제 경우에는 documentSet)와 이를 업데이트하는 함수를 제공하는 것입니다.

이제 상위 구성 요소에는 다음 코드가 있습니다.

'@/injectionKeys/documentSet'에서 dsKey 가져오기 '@/types/DocumentSet'에서 DocumentSet 유형 가져오기 ... const documentSet = ref(null) | 제공(dsKey, { 문서 세트, 업데이트: () => console.log('업데이트') })

그리고 하위 구성요소에는 다음 코드가 있습니다.

'@/injectionKeys/documentSet'에서 dsKey 가져오기 const ds = 주입(dsKey) const documentSet = ds?.documentSet

문제는 상용구 코드가 너무 많아서 뭔가 잘못하고 있는 것 같은 느낌이 든다는 것입니다.예를 들어 ds 객체를 다음과 같이 리팩토링해야 하는 이유를 이해할 수 없습니다.

const { documentSet } = ds

ds?.documentSet를 작성하는 대신 코드를 줄이는 것이 가능합니까? 특히 ds가 존재해야 한다고 확신하는 경우(이 없이는 하위 구성 요소를 렌더링하지 않습니다)< ;/p>

const { documentSet } = inject(dsKey)라고 쓰면 다음 오류가 나타납니다.

TS2339: 'documentSet' 속성이 '{ documentSet: Ref ;' 업데이트: () => Invalid '.

하위 구성 요소에서 중복을 제거하고 싶기 때문입니다.

 <문서세트메모 :documentSet="문서세트" />  <문서세트청원 :documentSet="문서세트" />  <문서세트보고서 :documentSet="문서세트" />