vue組件中iview的modal組件爬坑問題之modal的顯示與否應該是使用v-show
需求：點擊btn,彈出modal顯示圖表（以折現(xiàn)圖為例）
這應該是很基本的需求也是很容易實現(xiàn)的，代碼和效果如下：
代碼解釋：setTem是一個方法，改變modal為true，默認為false ； chart-line是圖表子組件，通過data向其傳遞參數(shù)，data綁定的數(shù)據(jù)是父組件mounted后拿到的數(shù)據(jù)
效果圖：點擊btn后的確顯示了modal框，但是里面的圖表不能顯示，接著改變子組件任何代碼，迫使重新編譯子組件，則子組件的圖表可以正常顯示
分析：當點擊btn時，modal框的確彈出來了，但推測其底層是使用v-show來實現(xiàn)顯示與否，所以改變modal為true或fasle只是改變了樣式的顯示與隱藏，所以不會觸發(fā)子組件的重新編譯，父組件在mounted前，已經(jīng)準備好了所有的視圖，包括子組件的視圖，只是這個時候由于modal的v-show=false,不能被觀察到罷了。但是此時傳給子組件的數(shù)據(jù)并沒有拿到，所有子組件不能顯示圖表；當點擊btn的時候，雖然此時父組件傳給子組件的數(shù)據(jù)拿到了，但由于是通過v-show改變顯示與否，子組件不會重新編譯，當然不會去讀取數(shù)據(jù)，就不會顯示
解決辦法：當點擊的時候顯示的促使子組件編譯，給子組件套一個v-if,代碼如下：
效果圖：當每次點擊的時候都會重新編譯子組件，所以子組件在每次編譯的時候都能拿到數(shù)據(jù)，自然能正常顯示
總結：以上是對vue中使用iview的modal組件解決的一個小問題，推測其使用的是v-show來控制彈出層的顯示與否，當子組件不是簡單的顯示基本信息而是要更新數(shù)據(jù)時就需要顯示的促使其重新編譯，否者數(shù)據(jù)無法得到更新。
以上所述是小編給大家介紹的vue組件中iview的modal組件爬坑問題之modal的顯示與否應該是使用v-show，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
在Web應用程序中剪貼板(Clipboard)操作是非常常見的操作之一,這篇文章主要給大家介紹了關于vue中粘貼板clipboard使用方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了在antd Table中插入可編輯的單元格實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家學習介紹了如何基于Vue實現(xiàn)簡單的權限控制，文中的示例代碼講解詳細，具有一定的參考價值，需要的小伙伴可以了解一下2023-07-07
這篇文章主要介紹了vue打包后的線上部署Apache、nginx全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
vue視頻播放插件vue-video-player的具體使用方法
這篇文章主要介紹了vue視頻播放插件vue-video-player的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了Vue項目如何部署到Tomcat服務器上,Vue中自帶webpack,可以通過一行命令將項目打包,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
詳解vue-router2.0動態(tài)路由獲取參數(shù)
本篇文章主要介紹了詳解vue-router2.0動態(tài)路由獲取參數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
下面小編就為大家?guī)硪黄獀ue.js實現(xiàn)備忘錄功能的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了關于vant折疊面板默認展開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04