vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图：
大致思路：考虑到5张图都是折线图，所以准备用一个子组件承接echarts画图，然后父组件通过prop传递不同数据来展示不同的图
踩坑问题：
1、引入line子组件，画了5个元素，但是只显示一个
原因：id重复
解决方案：prop传递不同id名
2、父组件传递的数据在子组件报错
这里情况比较特殊，我用父组件数据data里面给demo数据的时候，子组件是拿得到数据的，图片正常显示，所以以为可以了，当换成从后台请求的数据后，发现子组件总是报错，data.count is not a function ，在子组件的mounted里面打印父组件传递过来的prop，发现是空数组。
刚开始我以为是mounted生命周期的问题，所以改成created阶段去请求后台数据，然后传递给子组件，发现仍然不行。
这时，我给父组件数据加上默认一些demo数据，然后再created阶段再去请求后台数据，覆盖demo数据。发现子组件mounted阶段打印的还是demo数据，而不是请求的数据，所以知道问题原因就是子组件渲染的时候，在父组件created请求后台数据返回之前就prop传递给了子组件，所以导致子组件获取的都不是从后台请求的数据。
3、刚开始子组件时在mounted里面调用画图方法drawline()，由于这时数据为空，所以报错。我就考虑到是不是不让子组件自身去mounte画图，而是让父组件异步请求到后台数据之后，赋值给prop之后，再通过ref去调用子组件的画图方法drawLine()，这样是不是就可以画图成功了？但是验证还是不行。在drawLine()里面去打印父组件传递的prop，发现还是最初的空或者demo数据。
所以考虑到父组件传递prop，子组件mounted阶段就是渲染时传递，而不是赋值时传递的，所以总是传递的data()里面初始化的数据。所以通过父组件去调用子组件方法去画图也行不通。
4、考虑到父组件传递prop就是渲染时传递。
那么我就可以给子组件加个判断 v-if 条件，当父组件从后台异步取到数据后，并且赋值给prop后，让flag = true再去渲染子组件，那么此时传递给子组件的prop就是异步获取到数据之后的值，图形就正常展示出来了。
5、全部代码：
miniLine子组件
<template>
<div :id="myId" :style="{width:'100%',height:'200px'}"></div>
</template>
<script type="ecmascript-6">
export default {
data(){
return {
series:[]
}
},
props:['myId','lineDime','lineSeries'],
methods:{
drawLine(){
let myLine = this.$echarts.init(document.getElementById(this.myId));
let option = {
color:['#1CA6F1','#C1D534','#C6504D'],
tooltip: {
trigger: 'axis'
},
legend: {
icon:'stack'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top:'15%',
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true,
show:false
},
axisLabel:{
show:true,
formatter: function (value, index) {
return value.split(' ')[];
}
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
splitLine:{
show:true
}
}],
dataset:{
dimensions:this.lineDime,
source:this.lineSeries
},
series: this.series
};
myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});
}
},
mounted(){
let _obj = {
type:'line'
}
this.series.length = this.lineDime.length -
this.series.fill(_obj)
this.drawLine()
}
}
</script>
<style scoped lang="stylus" rel="stylesheet">
</style>
monitor父组件
<template>
<el-main>
<el-row class="dbInfo">
<el-col :span="">
<div class="panel-body">
<img src="../../assets/images/postgreSQL.jpg" height="">
<p>{{dbInfo.version}}</p>
</div>
</el-col>
<el-col :span="">
<div class="panel-body">
<p>Rows fetched/returned</p>
<div class="content" :style="{color:'#C1D534'}">{{dbInfo.fetchper}}<span>%</span></div>
</div>
</el-col>
<el-col :span="">
<div class="panel-body">
<p>Database capacity</p>
<div class="content" :style="{color:'#1CA6F1'}">{{parseInt(dbInfo.dbsize)}}<span>MB</span></div>
</div>
</el-col>
<el-col :span="">
<div class="panel-body">
<p>Max connections in use</p>
<div class="content" :style="{color:'#C6504D'}">{{dbInfo.conper}}<span>%</span></div>
</div>
</el-col>
</el-row>
<div class="query">
<el-date-picker
v-model="datetimerange"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
size="mini">
</el-date-picker>
<i class="el-icon-refresh" @click="refresh"></i>
</div>
<el-row :gutter="">
<el-col :span="">
<moniLine v-if="flag" :my-id="ids[0]" :line-dime="dimensions[0]" :line-series="monitorData"></moniLine>
</el-col>
<el-col :span="">
<moniLine v-if="flag" :my-id="ids[1]" :line-dime="dimensions[1]" :line-series="monitorData"></moniLine>
</el-col>
</el-row>
<el-row :gutter="">
<el-col :span="">
<moniLine v-if="flag" :my-id="ids[2]" :line-dime="dimensions[2]" :line-series="monitorData"></moniLine>
</el-col>
<el-col :span="">
<moniLine v-if="flag" :my-id="ids[3]" :line-dime="dimensions[3]" :line-series="monitorData"></moniLine>
</el-col>
<el-col :span="">
<moniLine v-if="flag" :my-id="ids[4]" :line-dime="dimensions[4]" :line-series="monitorData"></moniLine>
</el-col>
</el-row>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="Sessions" name="first">
<el-table :data="sessions" size="mini">
<el-table-column prop="pid" label="Pid" width="" align="center"></el-table-column>
<el-table-column prop="datname" label="Database" width="" align="center"></el-table-column>
<el-table-column prop="usename" label="User" width="" align="center"></el-table-column>
<el-table-column prop="application_name" label="Application" align="center"></el-table-column>
<el-table-column prop="client_addr" label="Client" width="" align="center"></el-table-column>
<el-table-column prop="backend_start" label="Backend start" width="" align="center"></el-table-column>
<el-table-column prop="state" label="State" width="" align="center"></el-table-column>
<el-table-column prop="wait_event" label="Wait Event" align="center"></el-table-column>
<el-table-column prop="blocking_pids" label="Blocking PIDs" width="" align="center"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Locks" name="second">
<el-table :data="locks" size="mini">
<el-table-column prop="pid" label="Pid" width=""></el-table-column>
<el-table-column prop="datname" label="Database" width=""></el-table-column>
<el-table-column prop="locktype" label="Lock type" width=""></el-table-column>
<el-table-column prop="relation" label="Target relation"></el-table-column>
<el-table-column prop="page" label="Page" width=""></el-table-column>
<el-table-column prop="tuple" label="Tuple" width=""></el-table-column>
<el-table-column prop="virtualxid" label="vXID(target)"></el-table-column>
<el-table-column prop="objsubid" label="XID(target)"></el-table-column>
<el-table-column prop="classid" label="Class" width=""></el-table-column>
<el-table-column prop="objid" label="ObjectID" width=""></el-table-column>
<el-table-column prop="transactionid" label="vXID(owner)" width=""></el-table-column>
<el-table-column prop="mode" label="Mode"></el-table-column>
<el-table-column prop="granted" label="Granted" width="">
<template slot-scope="scope">{{scope.row.granted ? '是' :'否'}}</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Prepared Transactions" name="third">
<el-table :data="transactions" size="mini">
<el-table-column prop="gid" label="Name"></el-table-column>
<el-table-column prop="database" label="Database"></el-table-column>
<el-table-column prop="owner" label="Owner"></el-table-column>
<el-table-column prop="transaction" label="XID"></el-table-column>
<el-table-column prop="prepared" label="Prepared at"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Configuration" name="fourth">
<el-table :data="configs" size="mini">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="category" label="Category"></el-table-column>
<el-table-column prop="setting" label="Setting"></el-table-column>
<el-table-column prop="unit" label="Unit" width=""></el-table-column>
<el-table-column prop="short_desc" label="Description"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-main>
</template>
<script type="ecmascript-6">
import moniLine from './moniLine'
import {getMonitorApi,getPgSessionsApi,getPgLocksApi,getPgPretransApi,getPgConfigsApi,getPgDbinfosApi} from '@/apis'
export default {
data(){
return {
flag:false,
ids:['myLine1','myLine2','myLine3','myLine4','myLine5'],
dimensions:[
['snap_time','active','idle','total'],
['snap_time','commits','rollbacks','transactions'],
['snap_time','inserts','updates','deletes'],
['snap_time','fetched','returned'],
['snap_time','reads','hits']
],
monitorData:[],
activeName:'first',
sessions:[],
locks:[],
transactions:[],
configs:[],
dbInfo:{},
datetimerange:[]
}
},
components:{
moniLine
},
created(){
this.fetchData()
},
methods:{
fetchData(){
getMonitorApi().then(res => {
if(res.status === ){
this.monitorData = res.data
this.flag = true
}
})
getPgSessionsApi().then(res => {
if(res.status === ){
this.sessions = res.data
}
})
getPgLocksApi().then(res => {
if(res.status === ){
this.locks = res.data
}
})
getPgPretransApi().then(res => {
if(res.status === ){
this.transactions = res.data
}
})
getPgConfigsApi().then(res => {
if(res.status === ){
this.configs = res.data
}
})
getPgDbinfosApi().then(res => {
if(res.status === ){
this.dbInfo = res.data
}
})
},
refresh(){
this.fetchData()
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet">
@import '../../assets/css/index.styl'
.el-row{
margin-bottom 20px
}
.query{
margin 10px
i{
font-weight
color #A0A0A6
}
& i:hover{
color #1CA6F1
cursor pointer
}
}
.el-table{
font-size 10px
}
.el-tabs__nav .el-tabs__item{
font-size 12px
}
.dbInfo{
text-align center
p{
margin 0px
font-size 12px
}
.panel-body{
margin 10px 20px
min-height 82px
.content{
font-size 50px
font-weight
span{
font-size 30px
}
}
}
}
</style>
vue父组件异步传递prop到子组件echarts画图问题踩坑总结的更多相关文章
- Vue 父页面 值传递 不到 子组件....
...各种百度无果..最后发现 这两个值 都是绑定的一个 ajax....... 坑爹啊..所以注意了....以后的写法.... 比如 data:{ data1: data2: } 假如 data1 ...
- 【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法
父组件(MyBlog.vue) <template> <!-- Delete Modal --> <!-- 注意:这里的@deleteBlog中的deleteBlog要和 ...
- angular4,angular6 父组件异步获取数据传值子组件 undefined 问题
通过输入和输出属性 实现数据在父子组件的交互在子组件内部使用@input接受父组件传入数据,使用@output传出数据到父组件详细标准讲解参考官方文档https://angular.cn/guide/ ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue 父组件ajax异步更新数据，子组件props获取不到
转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
随机推荐
- volatile 的一个经典例子
volatile 关键字的两层语义 一旦一个共享变量(类的成员变量.类的静态成员变量)被 volatile 修饰之后,那么就具备了两层语义: 1)保证了不同线程对这个变量进行操作时的可见性,即一个线程 ...
- ref:phpstorm配置远程调试(xdebug)(docker中)
ref:https://www.cnblogs.com/yjken/p/6555438.html readme:本文设置远程调试ubuntu中的php代码. 在docker中也可以,经过测试phpin ...
- python爬虫实战（五）--------智联招聘网
前些天帮同事爬取一些智联招聘网上的关于数据分析的职位信息,他说要做一些数据分析看看,现在已经帮他爬完了.我本来想用Scrapy来爬的,但是不知道为什么爬取的数据和真实搜到的数据不太一样,比如:搜索到的 ...
- 去除win7桌面图标小箭头.bat
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" ...
- Docker应用系列（二）| 构建Zookeeper集群
本示例基于Centos 7,在阿里云的三台机器上部署zookeeper集群,假设目前使用的账号为release,拥有sudo权限. 由于Docker官方镜像下载较慢,可以开启阿里云的Docker镜像下 ...
- java反射，代码优化
java的反射机制属实强大,能解决好些问题 在接手别人写的代码的时候,有一个bean类的get方法特别low,我都看不下去 重复代码写五遍,我都觉得太不合理.之后将其中代码抽取出来修改了下. publ ...
- 通过openURL的方式启动其它App
假设有两个App,项目名分别是SampleA和SampleB,需要在SampleA里点击一个Button来启动SampleB,并传递一个字符串.具体实现步骤如下: 1. 在SampleB的info.p ...
- 【UOJ 79】 一般图最大匹配 (✿带花树开花)
从前一个和谐的班级,所有人都是搞OI的.有 n 个是男生,有 0 个是女生.男生编号分别为 1,…,n. 现在老师想把他们分成若干个两人小组写动态仙人掌,一个人负责搬砖另一个人负责吐槽.每个人至多属于 ...
- 51nod1981 如何愉快地与STL玩耍
先摆官方题解吧......... ....................有什么好讲的呢....... 注意一些地方常数优化一下.......然后......$bitset$怎么暴力怎么来吧..... ...
- 【四边形不等式】HDU3506-Monkey Party
[题目大意] 香蕉森林里一群猴子(n<=1000)围成一圈开会,会长给他们互相介绍,每个猴子需要时间a[i].每次只能介绍相邻的两只猴子x和y认识,同时x所有认识的猴子和y所有认识的猴子也就相互 ...