我在如何处理一个任务方面遇到了一个问题。我有一个由4个方块组成的网格。这个网格，我们称之为gridComponent，可以放在其他几个组件中，并将在应用程序中用作导航工具。我的问题来自于如何填充信息。我有6个不同的数据信息，这些信息可以是天气、新闻、twitterfeed等。内容并不重要。看图片。在任何情况下，这个组件被加载4个颜色应该加载相应的数字。在主页上，我希望颜色1，2，3，4被显示，但在设置页面上，我可能希望5，6，3，4被显示，我如何在使用单个组件同时实现这一点？

当前如何设置网格

<div class="container col-md-6">
  <div class="row">
    <div class="card-group">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title }}</h5>
          {{ content1 }}
        </div>
      </div>
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title2 }}</h5>
          {{ content2 }}
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="card-group">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title3 }}</h5>
          {{ content3 }}
        </div>
      </div>
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title4 }}</h5>
          {{ content4 }}
        </div>
      </div>
    </div>
  </div>
</div>

因此，当我使用这个组件时，我想向它发送4个以上的组件，从那里收集标题和内容。
我不是来自前端背景，我把这看作是一个排序函数，我想在构造函数中传递4个组件，但似乎没有工作。因此，非常感谢在正确方向上的任何推动