问题:当父组件传值给子组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常

原因:后来经过排查,此处省略N字,发现echarts是在渲染的时候就传递数据

解决方案:在父组件定义一个flag,当数据获得的之后再进行子组件的渲染

//父组件
<div class="chart-wrapper">
<pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
</div>
...
import {getPie} from '@/api/status'
export default {
name: 'device',
data() {
return {
flag:false,
piedata:{},
...
},
created(){
this.init()
},
methods:{
init(){
getPie().then(this.getInfoSucc)
},
getInfoSucc(res){
res = res.data;
if(res.code ==0){
const values = res.values;
this.piedata = values.piedata;
this.flag = true
}
} --------------------- https://blog.csdn.net/Uookic/article/details/80638883?utm_source=copy

  

//子组件
<template>
<div :class="className" :style="{height:height,width:width}"></div>
</template> <script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils' export default {
props: {
pieData: {
type: Object
},
msg: {
type:Number
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
// watch: {
// piedata: {
// deep: true,
// handler(val) {
// console.log(val)
// this.setOptions(val)
// }
// }
// },
mounted() {
console.log("pieData:"+JSON.stringify(this.pieData))
this.initChart()
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
},
beforeDestroy() {
if (!this.chart) {
return
}
window.removeEventListener('resize', this.__resizeHanlder)
this.chart.dispose()
this.chart = null
},
methods: {
setOptions({ text, arrtype, arrdata } = {}) {
this.chart.setOption({
title: {
text: text
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: arrtype
},
calculable: true,
series: [
{
name: '',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '42%'],
data: arrdata,
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.pieData);
}
}
}
</script> --------------------- https://blog.csdn.net/Uookic/article/details/80638883?utm_source=copy

  

vue中父组件向子组件传值问题的更多相关文章

  1. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  2. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  3. artdialog4.1.7 中父页面给子页面传值

    artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...

  4. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  5. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  6. vue-父组件向子组件传值

    一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  9. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  10. Vue中的父组件给子组件传值

    父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...

随机推荐

  1. 第十周 11.28 psp0

    课堂测试总结 学生:马小心                                              日期:2017.11.28 作业号 日期 过程 估计数据 实际数据 累计数据 时间 ...

  2. JavaScript 继承 -JavaScript高级程序设计

    oo(Object Oriented)面向对象 许多oo语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.函数没有签名,在ecmascript中无法实现接 ...

  3. APP和web设计区别

    1.web在给定了核心功能后,还可以往页面再添加小需求如banner.快捷工具条.分页等. APP界面设计时,则偏向精简,尽可能明显的展示核心功能. 2.APP中需要考虑ISO和Andriod两种交互 ...

  4. 配置hosts快速访问GitHub

    经常要clone github中的一些项目,无奈如果不爬梯子的话速度实在是龟速,经常1k/s,于是搜了下解决方法,改HOSTS大法.Windows下在C:/Windows/system32/drive ...

  5. [HNOI2001] 求正整数 - 背包dp,数论

    对于任意输入的正整数n,请编程求出具有n个不同因子的最小正整数m. Solution (乍一看很简单却搞了好久?我真是太菜了) 根据因子个数计算公式 若 \(m = \prod p_i^{q_i}\) ...

  6. 【转载】python中math模块常用的方法

    转自:https://www.cnblogs.com/renpingsheng/p/7171950.html ceil #取大于等于x的最小的整数值,如果x是一个整数,则返回x ceil(x) Ret ...

  7. vscode中LaTeX的编写

    前言 在学习\(\mathrm{\LaTeX}\)的时候尝试过很多编辑器,但都被其复古的外观或者复杂的配置劝退.并且因为本身就在使用VScode写其他的一些语言,正好借此机会也学习一下怎么用VScod ...

  8. importing-cleaning-data-in-r-case-studies

    目录 importing-cleaning-data-in-r-case-studies 导入数据 查看数据结构 下面的一些都是查数据结构的 separate 拆分单元格 读取指定位置的数据 stri ...

  9. Python调用cmd命令

    常用的两种方式: 1.python的OS模块. OS模块调用CMD命令有两种方式:os.popen(),os.system(). 都是用当前进程来调用. os.system是无法获取返回值的.当运行结 ...

  10. KindEditor 编辑器前台得使用规范

    官方网址:http://www.kindsoft.net/下载网址:http://www.kindsoft.net/down.php 引入得脚本: <link href="~/Cont ...