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>

<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>