最近邊學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的,如果是對象呢?下次遇到這個問題繼續研究....
差不多先,繼續開發~~~
這是比較粗糙的~~~