实现一个Vue页面多次复用一个echarts组件的数据传递（setup语法糖写法)

目录

效果展示

问题描述

解决方案

---

效果展示

问题描述

由于想要实现组件的复用的功能，从而产生了两个问题，第一个是数据的传递，第二个是id的传递

最终发现实际上是同一个问题哈哈

注：id的传递的传递是为了防止由于id相同导致第二个echarts图覆盖第一个echarts图

---

解决方案：

实现效果的代码如下：

父组件：

子组件：

还是那句话，能看懂代码的伙伴，直接把代码拿走修改即可，稍有疑问的伙伴，就来听我解释一下吧。

首先说一下，传递数据

我先要把数据赋值给一个实例，

const DataList1 = reactive([
  { value: 40, name: 'rose 1' },
  { value: 38, name: 'rose 2' },
  { value: 32, name: 'rose 3' },
  { value: 30, name: 'rose 4' },
  { value: 28, name: 'rose 5' },
  { value: 26, name: 'rose 6' },
  { value: 22, name: 'rose 7' },
  { value: 18, name: 'rose 8' }
]);

 然后通过动态数据绑定，以及绑定一个id，传递给子组件

接着 ，通过defineprops接收传递过来的数据和id，并且创建一个实例

const props = defineProps({
  id:{
     type:String,
    default: "我是默认值"
      },
  Data: Array

})

 最后，将props接收到的值给对应的属性

        data: props.Data

   var id = props.id
  var chartDom = document.getElementById(id);

这样就可以实现组件的复用啦

觉得不错的小伙伴们，请点赞点赞点赞，收藏收藏收藏