vue如何實現遞歸槽

這篇文章主要介紹了vue如何實現遞歸槽，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

遞歸槽

我們是否可以v-for只使用模板來制作一個組件？在此過程中，我發現了如何遞歸地使用slot。

這是組件的樣子：

<!-- VFor.vue -->
<template>
    <div>
        <!-- 渲染第一項 -->
    {{ list[0] }}
        <!-- 如果我們有更多的項目可以繼續，但需要離開我們剛剛渲染的項目 -->
    <v-for
      v-if="list.length > 1"
            :list="list.slice(1)"
        />
    </div>
</template>

如果你想用作用域slot來做這件事——為什么不呢？！— 只需要進行一些調整：<

template>
  <div>
    <!-- 將項目傳遞到要渲染的slot中 -->
    <slot v-bind:item="list[0]">
      <!-- Default -->
      {{ list[0] }}
    </slot>

    <v-for
      v-if="list.length > 1"
      :list="list.slice(1)"
    >
      <!-- 遞歸向下傳遞作用域slot -->
      <template v-slot="{ item }">
        <slot v-bind:item="item" />
      </template>
    </v-for>
  </div>
</template>

以下是該組件的使用方法：

<template>
  <div>
    <!-- 常規列表 -->
    <v-for :list="list" />

    <!-- 帶有粗體項目的列表 -->
    <v-for :list="list">
      <template v-slot="{ item }">
        <strong>{{ item }}</strong>
      </template>
    </v-for>
  </div>
</template>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue如何實現遞歸槽”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!