ElementUI el-dialog中打開一個新的el-dialog(Vue子組件定義變量的一個坑)


先上效果圖:

用戶點擊到文本框內即可查看Guss的詳情

 

 

 

 

 這是el-dialog里面套着一個el-dialog,我去年寫過一篇博客是使用ifame標簽來實現el-dialog里面嵌套一個div的,隨着開發經驗增加。。。發現用組件化即可很完美的解決dialog里面嵌套dialog的問題。

請務必注意!dialog的放置位置!

 

 在這個Guss的父組件就是圖中陰影部分加入上述代碼(如果需要引用組件,在底下注冊就行)

 

 上一下Guss評分的代碼:

 

 

 

這里需要注意的是!這個isGussShow對象!接下來是isGussShow的定義和showGuess函數詳情:

 

 由於是子組件,vue規定子組件的變量必須在data()函數里面!

 

 因為返回給父組件的只是子組件的一份拷貝,接下來showGuess函數是最關鍵的!

 

 

這里務必注意!!!要提取這個this!!!如果不懂js中this用法的可以去看我的另一篇博客:

https://www.cnblogs.com/jyj666/p/14628535.html

 

 這里的isGuessShow是vue對象里的一個屬性!如果你不獲取此時的this那么你改變這里isGuessShow的值,上面那個dialog是不會顯示出來的!!!

最后再提一點,組件傳值記得小寫,大寫識別不了。(就是這里的assessment之類的)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM