vue 侧边导航栏递归显示

import axios from "axios";
import tabs1 from "../tab_content/tab1.vue";
import myTree from "./items.vue";
export default {
  data() {
    return {
      theModel: [],

    };
    props: ["tabs"]
  },

  components: { myTree },
  methods: {
     tabsvalue(data){
      console.log(data)
        this.$emit("get-data",data)
    }
  },
watch: {

},
  created() {

    axios
      .get("../../../static/nav.json")
      // .get("。。。")
      .then(
        function(response) {
          var arr = response.data.dActionList;
          var zNodes = [];
          var farternode = [];
          for (var i in arr) {
            if (arr[i].desktop == "0" && arr[i].parentId != null) {
              farternode.push(arr[i]);
            }
            if (arr[i].parentId && arr[i].desktop == "1") {
              zNodes.push(arr[i]);
            }
          }
          var childNodes = function getChildNodes(
            parentId,
            zNodes,
            nodes,
            child,
            parentItem
          ) {
            if (!parentId || !zNodes) return nodes;
            var childNode = [];
            for (var k in zNodes) {
              if (zNodes[k].parentId == parentId) {
                if (child) {
                  childNode.push(zNodes[k]);
                } else {
                  nodes.push(zNodes[k]);
                }
                childNodes(zNodes[k].id, zNodes, nodes, true, zNodes[k]);
              }
            }
            if (childNode.length > 0 && child) {
              parentItem.children = childNode;
            }
            return nodes;
          };

          for (var j in farternode) {
            farternode[j]["children"] = [];
            var nodes = [];
            nodes = childNodes(farternode[j].id, zNodes, nodes, false, null);
            farternode[j].children = nodes;
          }
          console.log(farternode);
          console.log(nodes);
          this.theModel = farternode;
        }.bind(this)
      )
      .catch(function(error) {
        console.log(error);
      });
    console.log(this.$refs.tabsdata)

  }
};

　　父组件 的js

<template>
  <div id="navto">
     <my-tree v-for="menuItem in theModel" :key="menuItem.id" :model="menuItem"  @data-tabsvalue="tabsvalue"></my-tree>
  </div>
</template>

父组件的节点

import tabs from ‘../compont/tabs.vue‘
export default {
  name: ‘treeMenu‘,
  props:["model"],

  data () {
    return {
      folderIcon: ‘folder‘,
      isDynamicFolder: false,
      isOpen: false,
    }
  },
  computed: {
    isFolder () {
      return !!(this.model.children && this.model.children.length)
    }
  },
  watch: {
    isDynamicFolder () {
      this.isOpen = true
      this.folderIcon = ‘folder-open‘
    }
  },
  methods: {
    tabsvalue(data){
      this.$emit("data-tabsvalue",data)
    },
    run(data){

      if(!data.children){
        this.tabsvalue(data)
         console.log(data.text);
          console.log(data.url)
      }
    },
    toggle () {
        this.isOpen = !this.isOpen
        this.folderIcon = this.isOpen ? ‘folder-open‘ : ‘folder‘
    }
  }
}

子组件的js

<template>
   <li>
    <span @click="toggle">
      <i :class="[‘icon‘, (isFolder || isDynamicFolder) ? folderIcon : ‘file-text‘]"></i>
      <span class="mousestyle">{{ model.text}}</span>
    </span>
  <!-- <transition name="mybox" > -->
    <ul v-if="isOpen">
      <span  v-for="item in model.children" :key="item.id" @click.stop="run(item)">
        <tree-menu :model="item" @data-tabsvalue="tabsvalue">
        </tree-menu>
      </span>
    </ul>
 <!-- </transition> -->
  </li>
</template>

子组件的节点

原文地址：https://www.cnblogs.com/duke-peng/p/8550321.html