Vue中插槽slot的使用方法與應用場景詳析
什么是插槽？
我們知道在Vue中 Child 組件的標簽 的中間是不可以包著什么的 。
可是往往在很多時候我們在使用組件的時候總想在組件間外面自定義一些標簽，vue新增了一種插槽機制，叫做作用域插槽。要求的版本是2.1.0+；
插槽，其實就相當于占位符。它在組件中給你的HTML模板占了一個位置，讓你來傳入一些東西。插槽又分為 匿名插槽、具名插槽、作用域插槽。
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope
匿名插槽
匿名插槽，我們也可以叫它單個插槽或者默認插槽。和具名插槽相對，它是不需要設置 name 屬性的，它隱藏的name屬性為default。
father.vue
child.vue
匿名插槽，name的屬性對應的是 default 也可以不寫就是默認的意思啦；
在使用的時候還有一個問題要注意的 如果是有2個以上的匿名插槽是會child標簽里面的內容全部都替換到每個slot；
具名插槽 （vue2.6.0+被廢棄的slot='name'）
顧名思義就是slot 是帶有name的 ，定義： 或者使用簡單縮寫的定義 #header 使用：要用一個 template標簽包裹
father.vue
child.vue
這里說一下多個具名插槽的使用 多個具名插槽，插槽的位置不是使用插槽的位置而定的，是在定義的時候的位置來替換的
father.vue
child.vue
作用域插槽
就是用來傳遞數(shù)據(jù)的插槽
當你想在一個插槽中使用數(shù)據(jù)時，要注意一個問題作用域的問題，Vue 官方文檔中說了父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的;
為了讓 子組件中的數(shù)據(jù) 在父級的插槽 內容中可用我們可以將 數(shù)據(jù) 作為 元素的一個特性綁定上去： v-bind:text="text"
注意：
匿名的作用域插槽和具名的作用域插槽 區(qū)別在v-slot:defult="接受的名稱"(defult(匿名的可以不寫，具名的相反要寫的是對應的name))
v-solt可以解構接收 解構接收的字段要和傳的字段一樣才可以 例如 :one 對應 v-slot="{one}"
效果圖
總結
到此這篇關于Vue中插槽slot的使用方法與應用場景的文章就介紹到這了,更多相關Vue插槽slot用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue如何自動化打包測試環(huán)境和正式環(huán)境的dist/test文件
這篇文章主要介紹了vue如何自動化打包測試環(huán)境和正式環(huán)境的dist/test文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
Vue生產和開發(fā)環(huán)境如何切換及過濾器的使用
本文主要介紹了Vue生產、開發(fā)環(huán)境如何切換及過濾器的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue+iview+less 實現(xiàn)換膚功能,項目搭建用的vue—cli，css框架選擇的iview，具體操作流程大家跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)下拉菜單效果，運用了hover顯示與隱藏以及定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
如果你在社交媒體上停留的時間過長，那么，你所在的網站很可能正在使用無限滾動組件。這篇文章教你利用Vue3實現(xiàn)無限滾動組件，感興趣的可以參考一下2022-09-09
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時候，我們一般引入多個js或者其他文件，一般使用? require.context 來引入多個不同的文件，但是vite中是不支持 require的，他推出了一個功能用import.meta.glob來引入多個，單個的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
本文主要介紹了如何在Vue中動態(tài)添加類名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
vue3在構建時使用魔法糖語法時defineProps和defineEmits的注意事項小結
在 Vue 3.2+ 版本中,可以使用 <script setup> 替代傳統(tǒng)的 script標簽來編寫組件,它提供了更簡潔的語法來編寫 Composition API 代碼,這篇文章主要介紹了vue3在構建時使用魔法糖語法時defineProps和defineEmits的注意事項小結,需要的朋友可以參考下2024-04-04
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02