vue中的插槽詳解
vue中代碼的復(fù)用, 為我們提供了 mixnis. 模板的復(fù)用, 為我們提供了 插槽( slot )
插槽的分類
默認插槽
具名插槽
作用域插槽
當(dāng)我們的組件中 我們只需要插入一個 html 標(biāo)簽的時候, 就使用默認插槽就可以了,
如果有多個, 我們就要給第一個 插槽取一個名字, 來決定到底插入哪一個插槽
當(dāng)我們的插槽中要使用組件中的數(shù)據(jù)的時候, 就可能會用到作用域插槽
下面展示一下, 默認插槽的用法
使用時
以上就是默認插槽的使用
具名插槽, 也就是說我們在組件中定一個 多個 slot , 為了分清到底作用到哪一個上面, 給插槽取一個名字來區(qū)分
使用的時候
這里說一下, vue 2.6 版本有一個新的插槽的寫法, 其中要使用到 template 標(biāo)簽, , 我們知道 template 只是一個包裹標(biāo)簽, 它不會渲染到真實頁面上, 新的slot 的寫法就是使用到了它, 沒有它還不行, 如下圖
下面來說一下作用域插槽
我們來看一下, 上面的兩種 插槽 展示的數(shù)據(jù), 都是放在 插槽的使用者 About 組件的 data中的,
但是我們有時候, 使用者是不管這些數(shù)據(jù)的, 數(shù)據(jù)中從 catetory 組件中自已獲取的,
使用者 About 只需要來管理 插槽中的內(nèi)容的展現(xiàn)形式,
這時就要使用作用域插槽了
上圖中, 可以看到 作用域插槽中 向使用者傳遞了兩個數(shù)據(jù)
那個使用者是怎么接收使用的呢
以上便是 vue 的三種插槽的使用
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
這篇文章主要為大家介紹了Vue3.0組件通信mitt源碼ts實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了vue 折疊展示多行文本組件，自動根據(jù)傳入的expand判斷是否需要折疊，非常完美，文章通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2021-10-10
Vue項目打包(build)時,自動打以時間命名的壓縮包方式
這篇文章主要介紹了Vue項目打包(build)時,自動打以時間命名的壓縮包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了詳解VUE2.X過濾器的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見的配置選項的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue3中實現(xiàn)過渡動畫的一些常用方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)附件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Vue倒計時3秒后返回首頁Demo,倒計時結(jié)束后要清除計時器,防止內(nèi)存泄漏,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-11-11
這篇文章主要為大家詳細介紹了Vue使用canvas實現(xiàn)圖片壓縮上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08