vue中遞歸組件的實(shí)現(xiàn)方法有哪些

這篇文章主要介紹vue中遞歸組件的實(shí)現(xiàn)方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

js里面有遞歸算法，同時(shí)，我們也可以利用props來(lái)實(shí)現(xiàn)vue模板的遞歸調(diào)用，但是前提是組件擁有 name 屬性

父組件:slotDemo.vue:

<template>
  <p>
    <!-----遞歸組件----->
    <ul>
      <simple3 :tree="item" v-for="item in tree"></simple3>
    </ul>

  </p>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  li
   padding-left 30px
</style>
<script>
  import simple3 from "./simple/simple3.vue";
  export default{
    data(){
      return {
        tree: [{
          label: "一級(jí)菜單",
          test:1,
          children: [{
            label: "二級(jí)菜單",
            test:2,
            children: [{
              label: "三級(jí)菜單",
              test:3
            }]
          }]
        }]
      }
    },

    components: {
     
      simple3
    }
  }
</script>

　　子組件：simple3.vue

<template>
  <li>
    <a>{{tree.label}}</a>
    <simple3 v-if="tree.children" :tree="item" v-for="item in tree.children" :class="item.test==2?'test2':'test3'"></simple3>

  </li>
</template>
<style rel="stylesheet/stylus" lang="stylus">
    .test2
      list-style disc

    .test3
      list-style decimal
</style>
<script>
  export default{
    name: "simple3",
    props: ["tree"]
  }
</script>

上面是一個(gè)子組件，定義了 name 為 simple03，然后在模板中調(diào)用自身，結(jié)合 v-for 實(shí)現(xiàn)遞歸

為了防止出現(xiàn)死循環(huán)，在調(diào)用自身的時(shí)候，加入了 v-if 作為判定條件

父組件中調(diào)用的時(shí)候，需要通過(guò) props 傳入一個(gè) tree;

為了對(duì)每一級(jí)菜單有所區(qū)分，我對(duì)tree里面的每一個(gè)子集合里面加了一個(gè)test字段來(lái)區(qū)分是哪一級(jí)的菜單然后對(duì)其不同的樣式進(jìn)行處理

最后的效果：

以上是“vue中遞歸組件的實(shí)現(xiàn)方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！