詳解Vue slot插槽
更新時(shí)間：2021年11月19日 16:21:55 作者：維生素D沒有用
這篇文章主要為大家介紹了Vue的slot插槽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1.作用:讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信的方式，適用于父組件===>子組件（傳的是HTML格式）。
父組件App:
子組件Category：
在父組件或者子組件里都可以給插槽中的內(nèi)容設(shè)置樣式，效果一樣
作用域插槽：
1.理解:數(shù)據(jù)在組件的自身（Category），但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者（APP）來決定。(games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由App組件決定)
子組件在給父組件傳數(shù)據(jù)
子：
父：
使用atguigu這樣一個(gè)對象接收是因?yàn)榭赡軅髁硕鄠€(gè)值
作用域插槽也可以有名字name
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue+webpack實(shí)現(xiàn)異步組件加載的方法
下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的,這篇文章主要給大家介紹了關(guān)于Vue組件之間的通信方式,需要的朋友可以參考下2022-06-06
使用Vue-Office實(shí)現(xiàn)Office文件預(yù)覽組件
在現(xiàn)代Web應(yīng)用中,Office 文件的預(yù)覽是一個(gè)常見的需求,本文將使用Vue-Office實(shí)現(xiàn)Office文件預(yù)覽組件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
Vue 自定義標(biāo)簽的src屬性不能使用相對路徑的解決
這篇文章主要介紹了Vue 自定義標(biāo)簽的src屬性不能使用相對路徑的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹，感興趣的朋友一起看看吧2018-09-09
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue 監(jiān)聽窗口變化對頁面部分元素重新渲染操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中實(shí)現(xiàn)回車鍵登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02