解決vue同一slot在組件中渲染多次的問題
更新時(shí)間：2018年09月06日 10:50:05 作者：風(fēng)翻火焰
今天小編就為大家分享一篇解決vue同一slot在組件中渲染多次的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
Q：今天寫公共組件的時(shí)候碰到一個(gè)奇葩的情況，slot內(nèi)部需要再次調(diào)用slot,這就會(huì)導(dǎo)致同一slot在組件中渲染多次引發(fā)的bug
A：把把父組件需要傳入的dom結(jié)構(gòu)作為props屬性傳遞給slotRender,保證出來的dom結(jié)構(gòu)不相同（盡管它們都是同一vnode渲染出來的）
定義一個(gè)渲染slot的組件
子公共組件調(diào)用
父公共組件調(diào)用
以上這篇解決vue同一slot在組件中渲染多次的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vuejs第十一篇組件之slot內(nèi)容分發(fā)實(shí)例詳解
- vue 組件中slot插口的具體用法
- Vue.js中組件中的slot實(shí)例詳解
- vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧
- 詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)
- vue slot 在子組件中顯示父組件傳遞的模板
- vue組件詳解之使用slot分發(fā)內(nèi)容
- Vue組件中slot的用法
- 使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
- vue組件化中slot的基本使用方法
相關(guān)文章
vue3?ref實(shí)現(xiàn)響應(yīng)式的方法
這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況：ref接收的是number這種原始類型、ref接收的是對(duì)象這種非原始類型,需要的朋友可以參考下2024-07-07
Vue中實(shí)現(xiàn)3D標(biāo)簽云的詳細(xì)代碼
本文通過實(shí)例代碼給大家介紹vue實(shí)現(xiàn)3D標(biāo)簽云的方法，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
這篇文章主要為大家介紹了前端框架封裝Vue第三方組件的三個(gè)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在系統(tǒng)開發(fā)中遇到了這么一個(gè)問題：后端一次性返回上百條的數(shù)據(jù)，我需要把返回的數(shù)據(jù)全部顯示在表格里，而且甲方爸爸明確指定了表格是不允許使用分頁的?？墒钱?dāng)使用a-table裝載上百條數(shù)據(jù)時(shí)，頁面出現(xiàn)了明顯的卡頓現(xiàn)象。只能使用滾動(dòng)加載的方案來代替了。2021-06-06
vue用@表示src文件夾，引入時(shí)找文件路徑更方便,下面這篇文章主要給大家介紹了關(guān)于vue配置根目錄(用@代表src目錄)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)與安卓、IOS交互的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請(qǐng)求或響應(yīng)數(shù)據(jù)時(shí)對(duì)其進(jìn)行一些處理或修改,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
Vue.js實(shí)現(xiàn)表格動(dòng)態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實(shí)現(xiàn)表格動(dòng)態(tài)增加刪除的方法實(shí)例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08