解決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)文章
本文主要介紹了el-table表格排序(多列排序和遠(yuǎn)程排序)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue3使用vuedraggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
在Vue3中實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細(xì)講解在Vue3中如何實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07
這篇文章主要介紹了解決vue單頁面 回退頁面 keeplive 緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vue中ref和reactive的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue組件系列開發(fā)之模態(tài)框，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04