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