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>

子組件的節點