VueJS의 유형 참조 제공/주입 기능
<p>상위 구성 요소에서 형식화된 참조를 제공하고 이를 하위 구성 요소에 삽입하려고 합니다. </p>
<p>제가 VueJS 문서를 이해했는지 잘 모르겠지만 이것이 제가 생각해낸 것입니다. </p>
<pre class="brush:php;toolbar:false;">'vue'에서 유형 { Ref } 가져오기
'vue'에서 가져오기 유형 {InjectionKey }
'@/types/DocumentSet'에서 DocumentSet 유형 가져오기
const documentSet = Symbol() as 주입키<{
documentSet: Ref,
업데이트: () =>
}>
기본 문서 세트 내보내기</pre>
<p>따라서 작업은 형식화된 개체(제 경우에는 documentSet)와 이를 업데이트하는 함수를 제공하는 것입니다. </p>
<p>이제 상위 구성 요소에는 다음 코드가 있습니다. </p>
<pre class="brush:php;toolbar:false;">'@/injectionKeys/documentSet'에서 dsKey 가져오기
'@/types/DocumentSet'에서 DocumentSet 유형 가져오기
...
const documentSet = ref<DocumentSet null>(null) |
제공(dsKey, {
문서 세트,
업데이트: () => console.log('업데이트')
})</pre>
<p>그리고 하위 구성요소에는 다음 코드가 있습니다. </p>
<pre class="brush:php;toolbar:false;">'@/injectionKeys/documentSet'에서 dsKey 가져오기
const ds = 주입(dsKey)
const documentSet = ds?.documentSet</pre>
<p>문제는 상용구 코드가 너무 많아서 뭔가 잘못하고 있는 것 같은 느낌이 든다는 것입니다.예를 들어 ds 객체를 다음과 같이 리팩토링해야 하는 이유를 이해할 수 없습니다. </p>
<pre class="brush:php;toolbar:false;">const { documentSet } = ds</pre>
<p><code>ds?.documentSet</code>를 작성하는 대신 코드를 줄이는 것이 가능합니까? 특히 ds가 존재해야 한다고 확신하는 경우(이 없이는 하위 구성 요소를 렌더링하지 않습니다)< ;/p>
<p><code>const { documentSet } = inject(dsKey)</code>라고 쓰면 다음 오류가 나타납니다. </p>
<p><code>TS2339: 'documentSet' 속성이 '{ documentSet: Ref ;' 업데이트: () => Invalid '.</code></p>
<p>하위 구성 요소에서 중복을 제거하고 싶기 때문입니다.</p>
<pre class="brush:php;toolbar:false;"><DocumentSetInfo
:documentSet="문서세트"
/>
<문서세트메모
:documentSet="문서세트"
/>
<DocumentSetPrograms
:documentSet="문서세트"
/>
<문서세트청원
:documentSet="문서세트"
/>
<DocumentSetPassRequests
:documentSet="문서세트"
/>
<문서세트보고서
:documentSet="문서세트"
/>
<DocumentSetReceptionNotices
:documentSet="문서세트"
//></pre></p>
