vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题

最新推荐文章于 2024-04-10 11:03:07 发布
最新推荐文章于 2024-04-10 11:03:07 发布
阅读量754 收藏 3
点赞数
分类专栏： vue 文章标签： echarts vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43923146/article/details/130718584
版权

vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题

由于页面需要绘制两个一样的图型，所以调用了同一个封装的echarts组件，结果后一个覆盖了前一个，页面上只渲染出来了一个。如下图：
在这里插入图片描述
最后发现我是通过id绑定的组件进行初始化，那么2个折线图就会使用同一个id，导致页面只渲染一个id，
在这里插入图片描述
正确的做法应该绑定ref进行初始化
正确代码如下：
在这里插入图片描述
这样就显示正常了
在这里插入图片描述

造梦者FZ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
解决Vue封装echarts组件多次调用出现id重复问题
甜心的专栏
08-01 1081
解决封装的echarts组件多次被调用，id重复，导致页面不渲染、数据覆盖等一系列问题
vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析
最新发布
m0_63229791的博客
04-10 607
因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。
实现一个Vue页面多次复用一个echarts组件的数据传递（setup语法糖写法)
m0_74069684的博客
06-07 926
注：id的传递的传递是为了防止由于id相同导致第二个echarts图覆盖第一个echarts图。还是那句话，能看懂代码的伙伴，直接把代码拿走修改即可，稍有疑问的伙伴，就来听我解释一下吧。由于想要实现组件的复用的功能，从而产生了两个问题，第一个是数据的传递，第二个是id的传递。接着 ，通过defineprops接收传递过来的数据和id，并且创建一个实例。然后通过动态数据绑定，以及绑定一个id，传递给子组件。最后，将props接收到的值给对应的属性。
vue 中多个相同组件重复请求的问题
weixin_42178050的博客
05-10 2071
vue 中多个相同组件重复请求的问题
Vue 组件化
weixin_47906106的博客
03-23 1280
'组件A-------unmounted''组件B-------unmounted''组件C-------unmounted''组件A-------created''组件B-------created''组件C-------created'// 组件名使用短横线相连,全小写。// 组件名使用短横线相连,全小写。'<h3>组件A</h3>''<h3>组件B</h3>''<h3>组件C</h3>''<h3>组件A</h3>''<h3>组件B</h3>''<h3>组件C</h3>'
vue3同一页面多次渲染挂着同一组件出错问题
LinMin的博客
03-01 902
vue3
解决vue一个页面中复用同一个echarts组件的问题
10-15
主要介绍了解决vue一个页面中复用同一个echarts组件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue 父组件调用子组件方法及事件
08-27
主要介绍了vue 父组件调用子组件方法及事件的相关资料，父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢？接下来跟随脚本之家小编一起看看吧
解决ECharts图表不能重复渲染问题
爱蹦哒的咸鱼的博客
04-12 488
图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签。
怎么解决vue中多个相同组件重复请求的问题？
weixin_43964148的博客
04-18 1552
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群现在因为有个上传组件他用到了这个mixin文件，这个mixin文件中mounted请求了接口，这样一个页面中如果有多个上传组件的话，那么就会导致一上来就会一次性请求多个重复的接口，有什么好点的方法吗，如果不放在vuex中的话。解决方法：这种情况下的 getSignature 最好是 Singleton 的，可以写个模块导出。mixin 里...
Vue子组件被同一个页面多次调用而引发的性能问题
LuckyWinty的博客
12-21 1190
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群最近做的Vue2项目中，都涉及到一种场景，那就是一个组件（下称子组件）被同一个页面（下称父组件）多次调用。本来以为这个场景没啥，但是在实际做的过程，发现还是有必要注意一下的。需要注意的点在于：子组件在其生命周期中是否进行了接口请求，如果进行了接口请求，那子组件被父组件调用了几次，那这个接口就会被请求了几次。如果子组件每次被调用时请求的是不同...
vue中使用watch监听路由导致多次请求问题解决方法
weixin_45357661的博客
10-26 8013
vue中使用watch监听路由导致多次请求问题解决方法
vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
changyana的博客
08-04 2947
由于要在页面绘制2个折线图，所以使用了同一个echarts组件，但是在渲染的时候，只能展示出第一个折线图，第二个不显示解决办法
vue解决组件重复渲染问题
heiniuCSDN的博客
01-24 859
最初我是直接获取这个数据（data）然后直接传递给组件MyComponent，这样会导致组件发生渲染，然后最开始的组件也会重复渲染，导致数据丢失。这部分代码是我自己定义的store模块存储数据，页面的MsgList中的数据就是一条条记录的数据。然后使用这个数组中存储的数据这样，循环中每个组件都有自己的数据渲染，就不会造成影响了。解决办法：存储每次渲染的数据并且存储到最外层的循环中。
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 795
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
vue项目使用v-for渲染数据只渲染出最后一条
m0_72929120的博客
06-29 552
样式问题，应该给content-list去用flex,但是我直接用在了list-index那个盒子上，数据会平铺
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
CLN1991的博客
08-25 4806
比如有现在有一个yanggb组件，我引入到我的页面中(创建了一个组件实例)，然后调用两次(在页面上调用组件实例两次)，那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值