一个vue组件重复使用，数据不同实现方法

最新推荐文章于 2023-12-04 15:33:23 发布

软件测试小菜鸟正在更新中

最新推荐文章于 2023-12-04 15:33:23 发布

阅读量8.3k

点赞数 2

分类专栏： vue element ui 文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/weixin_43258184/article/details/120762148

版权

本文介绍了如何在Vue中实现组件复用，避免在页面中创建多个相同但数据不同的图表或表格组件。通过创建一个公共组件并动态传入数据，结合v-for循环和props属性，可以在一个组件中展示不同数据，简化项目结构，减少冗余文件。同时强调了在使用v-for时设置key的重要性，以及props在父子组件间通信的角色。

摘要由CSDN通过智能技术生成

当我们页面上，有好多相同的图表（echarts)或者表格(table)的时候，但是只是表里的数据显示的不同。这时候可以不用每个表都新建一个.vue文件，可以公用一个组件，动态传递不同的数据。下面就实现如何动态传递组件里的数据，从而减少文件新建的冗余。

先看图：在这里插入图片描述
我们不需要创建5个相同的.vue组件文件，只需要创建一个就行。
首先创建index.vue文件，在创建组件worksShopTable.vue组件文件。
在index.vue里请求数据，并且返回给组件。(这里用虚拟数据,没有从接口请求）

data() {
   
    return {
   
      tableData: [
        {
   
          workshopName: '000',
          datas: [
            {
   
              WEIGHT: 520,
              CREATED: '2021-10-12 14:15:23',
              EMES_FACILITIES_ID: '014',
              ADDMAT_TYPE: '2'    
            },
            {
   
              WEIGHT: 300,
              CREATED: '2021-10-12 13:45:45',
              EMES_FACILITIES_ID: '153',
              ADDMAT_TYPE: '2'      
            }
          },
          {
   
          workshopName: '111',
          datas: [