位置: IT常识 - 正文
uni-app项目|在弹窗中引入uchart图表子组件不显示(uni-app入门到实战 以项目为导向)
编辑：rootadmin推荐整理分享uni-app项目|在弹窗中引入uchart图表子组件不显示(uni-app入门到实战 以项目为导向)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uni-app navigateto,uniapp弹出框怎么实现,uni-app tabbar,uniapp弹出框怎么实现,uni-app tabbar,uni-app tabbar,uni-app入门到实战 以项目为导向 掌握完整开发流程,uni-app项目实战,内容如对您有帮助，希望把文章链接给更多的朋友！
为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法。
1-解决方式1>如果你使用的uchart子组件是从官方拿的例子：进入到uchart子组件将onReady或者onLoad(){}的方法的名字换成mounted。
2>以父组件给子组件传值的方式给子组件的图表数据赋值。（官方不推荐的方式）
这种方式会使 chartData 原型链上增加额外的属性或方法，最终导致这些多余的属性或方法传入 uCharts 组件，带来预料不到的问题。实际上官方甚至都不推荐将uchart作为多层套娃的子组件。
import EchartsBar from '@/components/cardReportCharts/index.vue'//父组件的js<template><view class="charts-box"><qiun-data-charts type="bar" :opts="opts" :chartData="scoreList" /></view></template><!-- 子组件的模板内 -->export default {name: 'EchartsBar',props: ['scoreList'],data() {return {opts: {....}}},methods:{}} //子组件的js3>在父组件中调用子组件里跟转化成JavaScript 对象的方法
这种方法可以对整体赋值，并且采用深拷贝的方式，这种方式对数据需要动态变更的情况下很友好。此时要注意，该方法的调用需要在父组件的vue实例加载完成之后，即在nextTick方法之中调用。对于子组件调用还有什么疑问可以参考这篇文章：使用 Vue.js 怎么调用其他组件的方法
this.$nextTick(function(){this.$refs.echartsbar.getServerData()});2-分析原因之所以要这么大费周章，是因为在本人的尝试中，官方给的例子中onReady和onLoad方法均没有执行（不知是何缘故），当引入图表作为子组件时，就会一直显示加载页面而不显示数据并且也不报错。
官方的文档写的十分详细，有问题尽可能参考：uchart官方文档
上一篇：memberlist|会员信息列表 首页与内容页调用 会员信息(会员信息查询系统)
下一篇：宝塔主机分销系统1.7版本无限安装版可给用户开宝塔虚拟机免费下载-电脑学习网(宝塔主机分销系统设计)