vue3 子組件動態接受父組件的傳值


最近邊學vue邊做項目demo,也是苦,一路磕磕碰碰,遇到很多值得學習的問題都沒來得及整理。

忙里偷閑悄悄記一筆先,我怕回頭看又得琢磨

今天研究的是如何父組件動態改變子組件的props屬性內容,子組件要監聽到變化並作出回應。

功能描述:一個圖+一張表+按鈕控制

實現:點擊數據行或者按鈕,圖形跟着變化

直接貼效果:

 

其中我的圖跟table是兩個獨立的子組件

組件通信就不重復介紹了,可以參考我的上一篇

大致思路:數據控制是二維的,不同按鈕代表不同類型,table數據行代表一個類型下的某一個類別數據吧!em....比較粗糙,湊合理解

    所以在動態給echarts圖形傳入數據時需要2個參數來確定具體數據,比如說到底看產品1的收入還是成本,還是看產品2的...

    用tableRow表示產品類別(指table);typeIndex表示數據類型(合計,成本,利潤,指按鈕)

    今天難點是圖形組件如何監聽動態的tableRow和typeIndex的變化,也會簡單說一下如何獲取tableRow給父組件

接下來:

table 跟父組件

1.子組件table,如何獲取row的index

 

圖形組件跟父組件

2.echarts子組件

我就默認大家會用echarts了哈...有時間再整理如何引用

父組件:

按鈕點擊傳值的代碼省略啦,這個不難,就是綁定數據,都是在父組件操作,不再貼代碼了哈。

接下來今天主角出場了(終於寫到你了)

圖形子組件:

我是屬性接受的是數字類型的值,所以監聽和賦值給data是ok的,如果是對象呢?下次遇到這個問題繼續研究....

差不多先,繼續開發~~~

這是比較粗糙的~~~


免責聲明!

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



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