可折叠手风琴组件中的Vue负载组件

Question

我正在处理一个具有多个手风琴展开式下拉菜单的页面。看起来像这样：

每个步骤在展开时将呈现一个不同的组件。例如，如果展开了“步骤1”，它将加载history = model.fit(train_data.shuffle(10000).batch(512), epochs=20, validation_data=validation_data.batch(512), verbose=1) 组件。

对于实际的手风琴代码，我在这里创建了一个组件：

Accordion.vue （模板）

StepOne.vue

我的问题是，我不确定如何使每个手风琴步骤加载一个不同的组件，而无需复制粘贴每个步骤的整个手风琴html代码。

理想情况下，我希望它看起来像这样：

Display.vue

<template>
<div id="accordion">
  <div class="card">
    <div class="card-header" :id="givenId">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          {{stepStr}} // step 1,2,3 -etc
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" :aria-labelledby="givenId" data-parent="#accordion">
      <div class="card-body">
      // I want to load a dynamic component here.
      </div>
    </div>
  </div>
</div>
</template>

但这是无效的方法，或者至少，我不知道如何使它起作用。我还研究了将组件作为道具传递给手风琴的方法。但这似乎也不是有效的解决方案。

如何将组件传递给我的手风琴子组件，以便它可以正确呈现每个“步骤”组件？

Answer 1

您可以使用广告位

<slot></slot> 

在手风琴组件中，您希望在其中显示代码在手风琴标签之间。

 <div id="collapseOne" class="collapse show" :aria-labelledby="givenId" data-parent="#accordion">
      <div class="card-body">
          <slot></slot> // I want to load a dynamic component here.
      </div>
    </div>