【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样

我今天遇到的需求是首页可以自定义显示什么。我是后台系统，首页四个模块，然后四个模块要再设置页面里可以配置，每个模块显示什么类型的，还有顺序都可以改，那我就想到了动态组件，我直接写了四个组件，然后首页用动态组件把组件放在对应模块内，这不就成了。
然后经理又跟我说让选择模块的时候让用户可以点击规格模块时选择不同规格，其他的模块不用，我就给规格模块加了个可以选规格的下拉框，然后我一寻思，那这就需要我同一个组件在同一个页面上的四个模块内根据规格不同显示不同数据，因为用户很可能会自定义设置四个块都显示规格。

默认的是这样：（数据都是我模拟的）

但是用户最后很可能会自定义成这样：

用户想看规格 A B C D 四个规格的数据。

那么如果用户选成了四个规格，那不是完犊子了，全部都是一样的数据，我直接在组件内发请求就不合适了。
所以我就换了一个方法。直接每个动态组件上props传值给子组件，我直接在首页发请求把四个配置发给后台，后台收到后给我传四个模块对应的数据，我把四个模块的数据拆分到四个组件上传值过去，这样一来，如果选择的都是同一个组件，那么四个模块的数据不同，如果不是，那么就正常数据渲染就行。

首页代码html动态组件结构

    <!-- 顶部四个显示 -->
    <el-row :gutter="24" style="margin-bottom: 15px">
      <el-col :span="6">
        <el-card shadow="always" class="in" body-style="padding:0">
          <component :is="currentTabComponent1" :title="aaa"></component>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="out" body-style="padding:0">
          <component :is="currentTabComponent2" :title="bbb"></component>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="allin" body-style="padding:0">
          <component :is="currentTabComponent3" :title="ccc"></component>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="allout" body-style="padding:0">
          <component :is="currentTabComponent4" :title="ddd"></component>
        </el-card>
      </el-col>
    </el-row>

子组件内接收

我这里只是示范只插值了一个，正常你接收一个对象过来，把所有的数字都替换掉就可以了。