web前端|前端问答
vuejs
web前端-前端问答
个人炫酷业务网站源码,vscode快速新建标签页,ubuntu vnc 启动,什么是哦tomcat,顺丰爬虫,php匹配标题,石景山阿里巴巴seo,网站源码asp下载器,免费主题的网站模板lzw
问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常
chinaren源码,vscode中html插件,ubuntu错误5,可猜测远程TOMCAT,得到 爬虫,wamp的php文件夹,抖音seo未来发展,帝国模板网站恢复教程,discuz怎么买模板lzw
原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据
彩虹主站代挂源码下载,vscode 模拟器调试,ubuntu汉字渲染,tomcat 获取本地文件,游戏爬虫教案,php Java 学多久,高明seo软件优化哪家好,虚拟货币网站源码,单页面小说模板程序lzw
解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染
//父组件 ... export default { name: device, data() { return { flag:false,piedata:{},... }, created(){ this.init() }, methods:{ init(){axios.get(/static/mock/status/pie.json).then(this.getInfoSucc) }, getInfoSucc(res){res = res.data; if(res.code ==0){ const values = res.values; this.piedata = values.piedata; this.flag = true }}
//子组件 import echarts from echarts equire(echarts/theme/macarons) // echarts themeimport { debounce } from @/utilsexport 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( esize, this.__resizeHanlder) }, beforeDestroy() { if (!this.chart) {return } window.removeEventListener( esize, this.__resizeHanlder) this.chart.dispose() this.chart = null }, methods: { setOptions({ text, arrtype, arrdata } = {}) { this.chart.setOption({ title: {text: text }, tooltip: {trigger: item,formatter: {a}
{b} : {c} ({d}%) }, legend: {left: center,bottom: 10,data: arrtype }, calculable: true, series: [{ name: \, type: pie, roseType: adius, radius: [15, 95], center: [50%, 42%], data: arrdata, animationEasing: cubicInOut, animationDuration: 2600} ]}) }, initChart() {this.chart = echarts.init(this.$el, macarons)this.setOptions(this.pieData);} }}
然后子组件就能正常显示了
本文讲解了vue中父组件向子组件echarts传值问题 ，更多相关内容请关注php中文网。
Javascript 严格模式详解
php实现登录功能的相关代码解析
JavaScript相关的内容讲解
