vue中递归组件的实现方法介绍（附实例：三级菜单）-木庄网络博客

2022-04-19 14:14:35 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

下面Vue.js教程栏目通过实例制作一个三级菜单，来介绍vue中递归组件的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

js里面有递归算法，同时，我们也可以利用props来实现vue模板的递归调用，但是前提是组件拥有 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: "一级菜单",
          test:1,
          children: [{
            label: "二级菜单",
            test:2,
            children: [{
              label: "三级菜单",
              test:3
            }]
          }]
        }]
      }
    },
 
    components: {
      
      simple3
    }
  }
</script>