javascript - 可折叠 Accordion 组件中的 Vue 加载组件

Question

我正在开发一个具有多个 Accordion 式可扩展下拉菜单的页面。它看起来像这样:

每个步骤在展开时都会呈现不同的组件。例如，如果展开“Step 1”，它将加载 StepOne.vue 组件。

对于实际的 Accordion 代码，我在这里创建了一个组件:

Accordion.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>

我的问题是，我不确定如何使每个折叠步骤加载不同的组件，而不为每个步骤复制粘贴整个折叠 html 代码。

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

Display.vue

<template>
  // Step 1
  <accordion :id="step-1" :stepStr="'Step 1'">
      <Step-One></Step-One>
  </accordion>

  // Step 2
  <accordion :id="step-2" :stepStr="'Step 2'">
      <Step-Two></Step-Two>
  </accordion>

  // Step 3
  <accordion :id="step-3" :stepStr="'Step 3'">
      <Step-Three></Step-Three>
  </accordion>
</template>

但这是一种无效的方法，或者至少，我不知道如何使其发挥作用。我还考虑将组件作为 Prop 传递，以在 Accordion 中渲染。但这似乎也不是一个有效的解决方案。

如何将组件传递给我的子 Accordion 组件，以便它可以正确渲染每个“步骤”组件？

Answer 1

你可以使用插槽

<slot></slot> 

在您的 Accordion 组件中，您希望在 Accordion 标签之间显示代码。

 <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>