vue中的插槽詳解
vue中代碼的復用, 為我們提供了 mixnis. 模板的復用, 為我們提供了 插槽( slot )
插槽的分類
默認插槽
具名插槽
作用域插槽
當我們的組件中 我們只需要插入一個 html 標簽的時候, 就使用默認插槽就可以了,
如果有多個, 我們就要給第一個 插槽取一個名字, 來決定到底插入哪一個插槽
當我們的插槽中要使用組件中的數(shù)據(jù)的時候, 就可能會用到作用域插槽
下面展示一下, 默認插槽的用法
使用時
以上就是默認插槽的使用
具名插槽, 也就是說我們在組件中定一個 多個 slot , 為了分清到底作用到哪一個上面, 給插槽取一個名字來區(qū)分
使用的時候
這里說一下, vue 2.6 版本有一個新的插槽的寫法, 其中要使用到 template 標簽, , 我們知道 template 只是一個包裹標簽, 它不會渲染到真實頁面上, 新的slot 的寫法就是使用到了它, 沒有它還不行, 如下圖
下面來說一下作用域插槽
我們來看一下, 上面的兩種 插槽 展示的數(shù)據(jù), 都是放在 插槽的使用者 About 組件的 data中的,
但是我們有時候, 使用者是不管這些數(shù)據(jù)的, 數(shù)據(jù)中從 catetory 組件中自已獲取的,
使用者 About 只需要來管理 插槽中的內(nèi)容的展現(xiàn)形式,
這時就要使用作用域插槽了
上圖中, 可以看到 作用域插槽中 向使用者傳遞了兩個數(shù)據(jù)
那個使用者是怎么接收使用的呢
以上便是 vue 的三種插槽的使用
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容！
相關文章
本文主要介紹了Vite性能優(yōu)化之分包策略的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
最近在項目中使用了ElementUI的el-autocomplete,下面這篇文章主要介紹了vue中el-autocomplete支持分頁上拉加載功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
混入（Mixin）是?Vue?中一種代碼復用的模式,允許將組件的選項抽離為獨立模塊,下面就跟隨小編一起來深入了解下如何在Vue3中使用混入Mixin吧2025-03-03
antd配置config-overrides.js文件的操作
這篇文章主要介紹了antd配置config-overrides.js文件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue實現(xiàn)tab切換的3種方式及切換保持數(shù)據(jù)狀態(tài)
這篇文章主要給大家介紹了關于vue實現(xiàn)tab切換的3種方式及切換保持數(shù)據(jù)狀態(tài)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了element 動態(tài)合并表格的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了使用vxe-table合并單元格后增加選中效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了在vscode里使用.vue代碼模板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue中v-for和v-if不能在同一個標簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
我們對Vue中data數(shù)據(jù)的修改會導致界面對應的響應變化，而通過nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來可能還是有點夢幻，下面我們直接使用nextTick體驗一下效果2022-08-08