vue递归组件 （树形控件 ）

首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="判断条件"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染

1. 准备一个树状的递归数据

navigation: [
        {
          types: 1,
          id: "0",
          name: "首页",
          path: "/jiaowu_system/home",
          icon: "icon_hrIndex.png",
          children: []
        },
        {
          types: 1,
          id: "1",
          name: "教学资源",
          path: "",
          icon: "jiaowu_system_jiaoxueziyuan.png",
          children: [
            {
              types: 2,
              id: "1 - 1",
              name: "学校信息",
              path: "/jiaowu_system/SchoolInformation",
              icon: "",
              children: []
            },
            {
              types: 2,
              id: "1 - 2",
              name: "管理部门信息",
              path: "/jiaowu_system/administration",
              icon: "",
              children: []
            },
            {
              types: 2,
              id: "1 - 3",
              name: "专业信息",
              path: "/jiaowu_system/Ammatilliset",
              icon: "",
              children: []
            },
            {
              types: 2,
              id: "1 - 4",
              name: "教学场地信息",
              path: "/jiaowu_system/classroom",
              icon: "",
              children: []
            }
          ]
        },
        {
          types: 1,
          id: "2",
          name: "教学计划",
          path: "",
          icon: "jiaowu_system_jihua.png",
          children: [
            {
              types: 2,
              id: "2 - 1",
              name: "课程环节/管理",
              path: "/jiaowu_system/CoursePractice",
              icon: "",
              children: []
            },
            {
              types: 2,
              id: "2 - 2",
              name: "设置教学计划",
              path: "",
              icon: "",
              children: [
                {
                  types: 3,
                  id: "2 - 1 - 1",
                  name: "设置培养方案",
                  path: "/jiaowu_system/trainingPlan",
                  icon: "",
                  children: []
                },
                {
                  types: 3,
                  id: "2 - 1 - 2",
                  name: "复制培养方案",
                  path: "/jiaowu_system/copyTrainingPlan",
                  icon: "",
                  children: []
                }
              ]
            },
            {
              types: 2,
              id: "2 - 3",
              name: "核定教学计划",
              path: "/jiaowu_system/ensure_plan",
              icon: "",
              children: []
            },
            {
              types: 2,
              id: "2 - 4",
              name: "查看教学计划",
              path: "/jiaowu_system/teachingResources",
              icon: "",
              children: []
            }
          ]
        }

]

2. 创建一个简单的递归组件   // 这里 我是通过name实现递归效果的 你可以把它当作从import导入了一个组件并注册，我们在temlpate可以使用使用子组件自身进行递归了   默认不展示子组件，只能在父组件点击的时候才会展示 使用的 v-show  减少渲染消耗

上述代码中我们需要注意,这个组件必须含有 name 这个属性,因为没有 name 这个属性会造成控件自身不能调用自身, 当使用它时，只需要把上边我们定义好的数据通过props的方式传进去即可

3. 我们创建一个sidebar组件，这个组件作为使用递归组件的父组件    // navigation的数据在上面 需要copy

　　好了 我们就实现了一个简单的递归侧边栏组件，这段代码只是简单的做了下递归组件的使用。对于折叠树状菜单来说，我们一般只会去渲染一级的数据，当点击一级菜单时，再去渲染一级菜单下的结构，如此往复。那么v-if就可以实现我们的这个需求，当v-if设置为false时，递归组件将不会再进行渲染，设置为true时，继续渲染。组件中的name不仅可以递归的时候使用 还可以当项目使用keep-alive时，可搭配组件name进行缓存过滤

一个简单的小实例