Vue中父元件向子元件echarts傳值問題

2021-10-25 19:38:23 字數 3318 閱讀 1458

vue中子元件是echarts圖表,父元件向子元件利用props傳值,值傳遞過去了,但是,echarts不渲染。

資料沒有驅動試圖

用v-if進行乙個渲染判斷

父元件

="putongradar_container"

>

="container_left"

>

="title"

>

}<

/div>

"margin: 5px 0 0 3px"

:wheretogos=

"gotopath"

:taping-grade=

"shixiongpingtotalgrade"

:ziping-grade =

"zipingtatalgrade"

>

<

/zonghe-nengli>

//子元件eacharts圖表 重點就在這個flag上

"margin: 20px 0 0 3px"

v-if=

"flag"

:self-rating=

"zipingradar"

:senior-rating=

"shixiongpingradar"

>

<

/radar>

="title tupufenxi_title"

>

}<

/div>

"margin: 10px 0 0 3px"

>

<

/tupu-fenxi>

<

/div>

="container_right"

>

="title" style=

"margin-left=1px"

>

}<

/div>

"margin-left=1px;margin-top:13px"

>

<

/shidi-pingfen>

"margin-left=1px;margin-top:20px"

>

<

/shidi-barchart>

="title" style=

"margin: 10px 0 0 1px"

>

}<

/div>

="awaitevaluate_container"

>

"gotorouter"

>

<

/giveshidi-pingfen>

"margin: 0 0 0 20px"

>

<

/remind-selfping>

<

/div>

<

/div>

<

/div>

<

/template>

import zonghenengli from

"../../components/common/zonghenengli"

;import radar from

"../../components/common/radar"

import tupufenxi from

"../../components/common/tupufenxi"

;import shidipingfen from

"../../components/shixiong/shidipingfen"

;import shidibarchart from

"../../components/shixiong/shidibarchart"

;import giveshidipingfen from

"../../components/shixiong/giveshidipingfen"

;import remindselfping from

"../../components/shixiong/remindselfping"

;import

from

"@/api/ziping"

;export

default

,data()

;},created()

, methods:

=await

totalgrade()

res.

foreach

(item =>

if(item.judgesuserid != item.sysuserid)})

this

.flag =

true}}

, computed:,}

;<

/script>

"less" scoped>

.putongradar_container

.container_left

<

/style>

子元件:

"radar_container"

>

<

/div>

<

/template>

import

*as echarts from

"echarts"

;export

default

, seniorrating:},

data()

;},created()

,mounted()

,//圖例

legend:,}

, radar:

, axisline:

, splitline:},

splitarea:

, indicator:[,

,,,,

// ,],

},series:[},

symbol:

"circle"

,// 焦點的樣式,還可以取值'rect','angle'等

symbolsize:0,

// 焦點的大小

data:[,

},},

},,}

,},}

,],}

,],}

; radar.

setoption

(option);}

, methods:

, computed:,}

;<

/script>

#radar_container

<

/style>

Vue中父元件向子元件通訊

元件例項的作用域是孤立的。子元件的模板中是無法直接呼叫父元件的資料。可以使用props將父元件的資料傳給子元件。子元件在接受資料時要顯示宣告props 看下面的例子 here china panda div src script src script vue.component panda new ...

vue中父元件向子元件傳參

專案中經常用到元件與元件的傳參以及父元件跟子元件的傳參,還有子元件跟父元件的傳參,下面大概說下父元件向子元件傳參的整個過程,如果有不對的地方,望指正。在父元件中 子元件 按鈕 在這裡,父元件向子元件傳遞的是乙個物件,而我們利用v bind動態繫結了table,以乙個物件的形式傳遞過去,在子元件中用p...

VUE中父元件向子元件傳值

我們在使用vue開發的時候,有時候需要通過父元件像子元件傳遞資料或者為了防止每個子元件都會有請求資料事件的發生,從而導致 冗餘,所以,我們可以把同乙個模組下的所有子元件請求事件都放到父元件中去處理。1 父元件通過屬性的方式給子元件傳值 注意 city 和 swiperlist 這裡定義的什麼名字,子...