如何将静态组件附加到 Vue 中的动态组件？答案

【问题标题】：How to append a static components to a dynamic ones in Vue?如何将静态组件附加到 Vue 中的动态组件？
【发布时间】：2019-12-19 18:20:45
【问题描述】：

我想要实现的是：我有一个 <v-window> 父组件，它接受 <v-window-item> 子组件。第一个孩子通过一个返回一个对象的 Vuex getter 循环，并根据其内容动态地可视化卡片。但是，我有另一个类似于摘要的静态组件，其中包含一个注销按钮，我想将其附加到从商店生成的最后一个动态<v-window>。到目前为止，这是我设置代码的方式：

<v-window v-model="reportPage">
    <v-window-item v-for="card in getSelectedCard" :key="card.id">
    </v-window-item>
</v-window>

有人可以给我一些关于如何实现这一目标的指导吗？提前致谢！

【问题讨论】：

标签： vue.js vuex vue-dynamic-components

【解决方案1】：

我认为有几种方法可以实现这样的事情，我会使用的一种是基于当前索引的条件渲染：

new Vue({
  el: "#app",
  data: {
    someList: [ "first", "middle", "last" ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ol>
    <li v-for="(item, index) in someList">
      {{ item }}
      <span v-if="index === someList.length - 1">
         - logout button component here
      </span>
    </li>
  </ol>
</div>

当然我v-if的内容可以是你v-window-item的道具：

<v-window-item v-for="(card, index) in getSelectedCard" :key="card.id" show-logout-button="index === getSelectedCard.length - 1">

或者，如果您的 v-window-item 中有一个插槽：

<v-window-item v-for="(card, index) in getSelectedCard" :key="card.id">
    <logout-button v-if="index === getSelectedCard.length - 1" />
</v-window-item>

【讨论】：

感谢您的帮助，我将尝试实施您的解决方案！

【解决方案2】：

有slots可以帮助你。您只需将<slot></slot> 添加到您的子组件中，然后您就可以将您喜欢的任何内容放入您的子标签中！

【讨论】：