千鋒教育前端Vue3.0全套視頻教程(Kerwin2023版,Vue.js零基礎(chǔ)

學習了插槽的概念和使用方法,復用性更強,平時在設(shè)計子組件時,絕大多數(shù)的布局都已經(jīng)在子組件中完成定義,但是有些布局需要在父組件使用子組件時動態(tài)設(shè)置,這是就可以使用組件插槽。在設(shè)計子組件時,可以在布局中定義一個插槽位置并且給與基礎(chǔ)樣式,父組件在使用時可以通過 slot 屬性來動態(tài)設(shè)置需要顯示的內(nèi)容。slot有可以設(shè)置多個,且在定義組件時: slot的name屬性起插槽名,使用組件時,template配合#插槽名傳入具體html標簽或組件,它的使用更加靈活,組件的原始內(nèi)容: 即在vue實例范圍之內(nèi),因此可以調(diào)用實例的data和methods功能更強大,復用性更強,讓組件內(nèi)的部分標簽支持自定義使用場景:比如布局組件、表格列、下拉選、彈框顯示內(nèi)容等比如我們項目中經(jīng)常會使用到一個多處復用的組件,但是在每個地方使用時,都需要一些細微的更改,只需使用插槽向需要 微調(diào) 的位置傳遞內(nèi)容,就能讓這個組件在不同場景下應(yīng)用,編程更高效,減少代碼重復性。
標簽: