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

2022-05-03 02:03:11 字數 1232 閱讀 2122

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

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

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

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

實現:點選資料行或者按鈕,圖形跟著變化

直接貼效果:

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

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

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

用tablerow表示產品類別(指table);typeindex表示資料型別(合計,成本,利潤,指按鈕)

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

接下來:

table 跟父元件

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

圖形元件跟父元件

2.echarts子元件

父元件:

按鈕點選傳值的**省略啦,這個不難,就是繫結資料,都是在父元件操作,不再貼**了哈。

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

圖形子元件:

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

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

這是比較粗糙的~~~

VUE 父元件子元件間通訊

父元件給子元件傳參,子元件通過prop屬性進行接收 簡單搭建元件部分如下,其中父元素身上有兩個資料,分別是字元型資料1,json型資料2 子元件分別從父元件獲取這兩個資料並展示,其次子元件有自己的資料 子元件通過 emit 事件想父元件發射資料 頁面結構 其中child a為子元件 這是父元件 父元...

vue父元件觸發子元件方法

通常來說是子元件觸發父元件的情況比較多。比如每次提交表單的時候封裝了常用的選項類子元件,選好值之後將值傳回父元件,父元件得到值這樣的操作。這是不用初始化頁面資料的情況。但是還有其他的情況就是已經選好了謀個服裝的品牌和品牌下的某個系列後 這是兩個相同的元件但是在父元件不同的地方呼叫 這時候我想換個品牌...

vue子元件呼叫父元件方法

說明 有乙個元件inputlistselect.vue,選中乙個行資料,將該資料傳送到父級projectedit.vue檔案中 1 父級projectedit.vue呼叫 import inputlistselect from views components inputlistselect exp...