千鋒教育前端Vue3.0全套視頻教程(Kerwin2023版,Vue.js零基礎(chǔ)
2023-07-19 19:49 作者:bili_30465039590 | 我要投稿

- 默認(rèn)插槽其實就是定義一個插槽slot標(biāo)簽,這個slot標(biāo)簽相當(dāng)于一個打標(biāo)識的作用,等著使用組件的時候,在組件標(biāo)簽里面寫html結(jié)構(gòu),然后這些結(jié)構(gòu)就會自動填充到在slot標(biāo)簽的位置
- 具名插槽和默認(rèn)插槽類似,只不過在slot標(biāo)簽上添加name屬性指定插槽的名字,當(dāng)我們使用多個插槽的時候,這些插槽都有對應(yīng)的名字,我們在組件標(biāo)簽里面寫html結(jié)構(gòu)的時候,如果需要哪些html結(jié)構(gòu)放入對應(yīng)名字的插槽,就要給這些html標(biāo)簽添加slot屬性且屬性值和指定插槽的name值是一樣的。且具名插槽配合template標(biāo)簽(不參與編譯)一起使用時,slot屬性還可以寫成v-slot:name名
- 如果你想要把幾個元素一起放到同一個插槽的時候,你可以使用template標(biāo)簽去包裹,然后在template標(biāo)簽上添加slot屬性就行,也可以寫成v-slot:xxx。且v-slot屬性只能用在template標(biāo)簽上,不能用在其他標(biāo)簽上面
- 總結(jié):
①插槽的作用就是讓父組件向子組件指定位置插入html結(jié)構(gòu),預(yù)留位置給子組件渲染。也是一種組件間的通信方式,適用于父子組件傳遞數(shù)據(jù)(html結(jié)構(gòu))
②插槽有三種分類:默認(rèn)插槽、具名插槽、作用域插槽
標(biāo)簽: