echarts图表刷新:vue中传递数据给子组件,并且监听子组件中数据的变化,实现刷新echarts图表的功能
首先是在父组件中传递数据给子组件,我们可以使用v-bind来实现<line-chart :chart-data="lineChartData" v-bind:swss="swss"/>在组件当中使用prop属性来接受父组件传递过来的值props: {swss: {type: String,required: true}...
·
- 首先是在父组件中传递数据给子组件,我们可以使用v-bind来实现
<line-chart :chart-data="lineChartData" v-bind:swss="swss"/>
- 在组件当中使用prop属性来接受父组件传递过来的值
props: {
swss: {
type: String,
required: true
}
}
- 接下来我们使用watch来进行监听swss的变化
watch: {
swss: {
handler(newValue, oldValue) {
this.swjg = newValue; //把新值赋值给我们的属性数据
this.initChart(); //刷新echarts图表
},
deep: true
}
},
注意watch和data属性是平级的关系,
设置好之后,我们通过改变父组件中的属性来向子组件传递值,监听到变化之后出发方法来刷新echarts图表。
更多推荐
已为社区贡献10条内容
所有评论(0)