Jenis peruntukan rujukan/fungsi suntikan dalam VueJS
P粉441076405
P粉441076405 2023-09-04 16:34:30
0
1
543
<p>Saya cuba menyediakan ref ditaip daripada komponen induk dan menyuntiknya ke dalam komponen anak. </p> <p>Saya tidak pasti sama ada saya memahami dokumentasi VueJS, tetapi inilah yang saya hasilkan. </p> <pre class="brush:php;toolbar:false;">import type { Ref } from 'vue' jenis import { InjectionKey } daripada 'vue' jenis import DocumentSet daripada '@/types/DocumentSet' const documentSet = Simbol() sebagai InjectionKey<{ documentSet: Ref<DocumentSet>, kemas kini: () => }> eksport default documentSet</pre> <p>Jadi, tugasnya adalah untuk menyediakan objek yang ditaip (dalam kes saya, documentSet), dan fungsi yang mengemas kininya. </p> <p>Sekarang, dalam komponen induk saya mempunyai kod ini: </p> <pre class="brush:php;toolbar:false;">import dsKey daripada '@/injectionKeys/documentSet' jenis import DocumentSet daripada '@/types/DocumentSet' ... const documentSet = ref<DocumentSet |. sediakan(dsKey, { set dokumen, kemas kini: () => console.log('update') })</pre> <p>Dan dalam komponen kanak-kanak saya mempunyai kod ini: </p> <pre class="brush:php;toolbar:false;">import dsKey daripada '@/injectionKeys/documentSet' const ds = inject(dsKey) const documentSet = ds?.documentSet</pre> <p>Masalahnya, memandangkan terdapat banyak kod boilerplate, saya rasa seperti saya melakukan sesuatu yang salah.Sebagai contoh, saya tidak dapat memahami mengapa objek ds harus difaktorkan semula seperti ini: </p> <pre class="brush:php;toolbar:false;">const { documentSet } = ds</pre> <p>Adakah mungkin untuk memendekkan kod dan bukannya menulis <code>ds?.documentSet</code>, terutamanya jika saya pasti bahawa ds harus wujud (tanpanya saya tidak akan memaparkan komponen anak)< ;/p> <p>Jika saya menulis <code>const { documentSet } = inject(dsKey)</code>, ralat berikut akan muncul: </p> <p><kod>TS2339: Harta 'documentSet' tidak wujud pada jenis '{ documentSet: Ruj ;' Kemas kini: () => <p>Ideanya adalah kerana saya ingin menghapuskan pertindihan dalam komponen kanak-kanak:</p> <pre class="brush:php;toolbar:false;"><DocumentSetInfo :documentSet="documentSet" /> <DocumentSetMemos :documentSet="documentSet" /> <DocumentSetPrograms :documentSet="documentSet" /> <DocumentSetPetition :documentSet="documentSet" /> <DocumentSetPassRequests :documentSet="documentSet" /> <DocumentSetReport :documentSet="documentSet" /> <DocumentSetReceptionNotices :documentSet="documentSet" /></pra></p>
P粉441076405
P粉441076405

membalas semua(1)
P粉446800329

Anda boleh memasukkannya ke dalam composable yang menyediakan fungsi provde yang mengendalikan peruntukan dan penggunaan fungsi* yang mengendalikan suntikan:

const CurrentDocumentSetKey = Symbol() as InjectionKey<{
  documentSet: Ref<DocumentSet>,
  update: () => void
}>

export function provideCurrentDocumentSet(documentSet:DocumentSet, update: () => any){
  provide(CurrentDocumentSetKey, {documentSet, update})
}

export useCurrentDocumentSet(){
  const ds = inject(CurrentDocumentSetKey)
  if (!ds) throw new Error('No current DocumentSet provided')
  return ds
}

Kini anda hanya perlu memanggil provideCurrentDocumentSet() dalam komponen induk, dan semua komponen anak hanya perlu melakukan perkara berikut:

const {documentSet, update} = useCurrentDocumentSet()

Anda tidak perlu mengeksport InjectionKey pun dan komponen tersebut tidak perlu tahu mengenainya. (Vuetify melakukan ini juga, contohnya di sini)

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan