vue.js - 如何将静态组件附加到 Vue 中的动态组件？

Question

我想要实现的是：我有一个带孩子的<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>

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

Answer 1

有一些插槽可以帮助您。你只需要在<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>