Vue에서 정적 구성 요소를 동적 구성 요소에 추가하는 방법

Vue에서 정적 구성 요소를 동적 구성 요소에 추가하는 방법

제가 달성하고자 하는 것은 다음과 같습니다.나는 가지고 있다<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>

그걸 어떻게 달성할 수 있는지 조언해 주실 수 있나요?잘 부탁드립니다!

이러한 목적을 달성하기 위한 몇 가지 방법이 있다고 생각합니다만, 현재 인덱스에 근거한 조건부 렌더링을 사용하고 싶습니다.

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>

도움이 될 수 있는 슬롯이 있습니다.다음 명령어를 추가하기만 하면 됩니다.<slot></slot>자녀용 컴포넌트에 원하는 것을 자녀용 태그에 넣을 수 있습니다!

언급URL : https://stackoverflow.com/questions/57473576/how-to-append-a-static-components-to-a-dynamic-ones-in-vue