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)
 }
}; 

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 &＃63; 'folder-open' : 'folder'
  }
 }
}