vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show
需求：點(diǎn)擊btn,彈出modal顯示圖表（以折現(xiàn)圖為例）
這應(yīng)該是很基本的需求也是很容易實(shí)現(xiàn)的，代碼和效果如下：
代碼解釋：setTem是一個方法，改變modal為true，默認(rèn)為false ； chart-line是圖表子組件，通過data向其傳遞參數(shù)，data綁定的數(shù)據(jù)是父組件mounted后拿到的數(shù)據(jù)
效果圖：點(diǎn)擊btn后的確顯示了modal框，但是里面的圖表不能顯示，接著改變子組件任何代碼，迫使重新編譯子組件，則子組件的圖表可以正常顯示
分析：當(dāng)點(diǎn)擊btn時，modal框的確彈出來了，但推測其底層是使用v-show來實(shí)現(xiàn)顯示與否，所以改變modal為true或fasle只是改變了樣式的顯示與隱藏，所以不會觸發(fā)子組件的重新編譯，父組件在mounted前，已經(jīng)準(zhǔn)備好了所有的視圖，包括子組件的視圖，只是這個時候由于modal的v-show=false,不能被觀察到罷了。但是此時傳給子組件的數(shù)據(jù)并沒有拿到，所有子組件不能顯示圖表；當(dāng)點(diǎn)擊btn的時候，雖然此時父組件傳給子組件的數(shù)據(jù)拿到了，但由于是通過v-show改變顯示與否，子組件不會重新編譯，當(dāng)然不會去讀取數(shù)據(jù)，就不會顯示
解決辦法：當(dāng)點(diǎn)擊的時候顯示的促使子組件編譯，給子組件套一個v-if,代碼如下：
效果圖：當(dāng)每次點(diǎn)擊的時候都會重新編譯子組件，所以子組件在每次編譯的時候都能拿到數(shù)據(jù)，自然能正常顯示
總結(jié)：以上是對vue中使用iview的modal組件解決的一個小問題，推測其使用的是v-show來控制彈出層的顯示與否，當(dāng)子組件不是簡單的顯示基本信息而是要更新數(shù)據(jù)時就需要顯示的促使其重新編譯，否者數(shù)據(jù)無法得到更新。
以上所述是小編給大家介紹的vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
element-ui?tree?異步樹實(shí)現(xiàn)勾選自動展開、指定展開、指定勾選功能
這篇文章主要介紹了element-ui?tree?異步樹實(shí)現(xiàn)勾選自動展開、指定展開、指定勾選,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Vue3源碼系列通過render及patch了解diff原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
CodeMirror是一個功能強(qiáng)大的Web代碼編輯器,廣泛應(yīng)用于各種Web應(yīng)用中,在Vue3項(xiàng)目中集成CodeMirror,可以顯著提升代碼編輯和展示的用戶體驗(yàn),本文將結(jié)合實(shí)際案例,詳細(xì)介紹在Vue3中使用CodeMirror插件的方法,需要的朋友可以參考下2024-12-12
當(dāng)一個組件需要獲取多個狀態(tài)的時候,將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余,為了解決這個問題我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性,這篇文章主要給大家介紹了關(guān)于vuex狀態(tài)管理之mapState用法的相關(guān)資料,需要的朋友可以參考下2023-12-12
Effect幾乎是Vue3.0中最重要的一個功能了,計(jì)算屬性監(jiān)聽函數(shù)都是基于effect實(shí)現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3中effect函數(shù)到底是什么的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
unplugin-vue-components解決命名沖突問題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue編譯報錯內(nèi)存溢出問題解決方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
這篇文章主要介紹了vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文通過實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-02-02