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

Question

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

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

有人可以指导我如何实现吗？提前致谢！

Answer 1

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

Answer 2

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

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>

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

How to append a static components to a dynamic ones in Vue?

vue.js

vuex

vue-dynamic-components