参照前辈方法实现的，觉得不错，记录一下：
父组件：
<!-- 菜单树 --> ???????????????<ul class="T_down" v-for="(menuItem,index) in customerArray" :key="index"> ???????????????????<tree-menu :treeData="menuItem"></tree-menu> ???????????????</ul>import treeMenu from ‘./treeMenu.vue‘myMailTree: [ ???????????????{ ???????????????????id: 0, ???????????????????label: ‘发件箱‘, ???????????????????children: [] ???????????????}, ???????????????{ ???????????????????id: 1, ???????????????????label: ‘收件箱‘, ???????????????????children: [ ???????????????????????{ ???????????????????????????id: 11, ???????????????????????????label: ‘常用邮件‘, ???????????????????????}, ???????????????????????{ ???????????????????????????id: 12, ???????????????????????????label: ‘常用邮件‘, ???????????????????????????children: [ ???????????????????????????????{ ???????????????????????????????????id: 11, ???????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????children: [ ???????????????????????????????????????{ ???????????????????????????????????????????id: 11, ???????????????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????????}, ???????????????????????????????????????{ ???????????????????????????????????????????id: 12, ???????????????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????????????children: [ ???????????????????????????????????????????????{ ???????????????????????????????????????????????????id: 11, ???????????????????????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????????????????}, ???????????????????????????????????????????????{ ???????????????????????????????????????????????????id: 12, ???????????????????????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????????????????????children: [ ???????????????????????????????????????????????????????{ ???????????????????????????????????????????????????????????id: 11, ???????????????????????????????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????????????????????????}, ???????????????????????????????????????????????????????{ ???????????????????????????????????????????????????????????id: 12, ???????????????????????????????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????????????????????????????}, ???????????????????????????????????????????????????] ???????????????????????????????????????????????}, ???????????????????????????????????????????] ???????????????????????????????????????}, ???????????????????????????????????] ???????????????????????????????}, ???????????????????????????????{ ???????????????????????????????????id: 12, ???????????????????????????????????label: ‘常用邮件‘, ???????????????????????????????}, ???????????????????????????] ???????????????????????}, ???????????????????] ???????????????}, ???????????????{ ???????????????????id: 3, ???????????????????label: ‘草稿箱‘, ???????????????}, ???????????], components: { ???????‘tree-menu‘: treeMenu ???},子组件：
<template> ???<li> ???????<h3> ???????????<i v-if="isFolder" @click="toggle" class="iconfont" :class="[open ? ‘icon-arrow-down‘: ‘icon-arrow-right‘]"></i> ???????????<span class="label">{{treeData.label}} ???????????????<em>(99)</em> ???????????</span> ???????????<span class="T_set"> ???????????????<i class="iconfont icon-subordinate"></i> ???????????????<i class="iconfont icon-subordinate"></i> ???????????????<i class="iconfont icon-subordinate"></i> ???????????</span> ???????</h3> ???????<ul class="T_down" v-show="open" v-if="isFolder"> ???????????<tree-menu v-for="item in treeData.children" :key="item.id" :treeData="item"></tree-menu> ???????</ul> ???</li></template><script>export default { ???name: ‘treeMenu‘, ???props: [‘treeData‘], ???data() { ???????return { ???????????open: false ???????} ???}, ???computed: { ???????isFolder() { ???????????return this.treeData.children && this.treeData.children.length ???????} ???}, ???methods: { ???????toggle: function() { ???????????if (this.isFolder) { ???????????????this.open = !this.open ???????????} ???????} ???}}</script>less
ul.T_down { ???????????????????//菜单树 ???????????????????// border: 1px solid red; ???????????????????background-color: #fff; ???????????????????padding-left: 17px; ???????????????????line-height: 35px; ???????????????????li { ???????????????????????>h3 { ???????????????????????????// border: 1px solid red; ???????????????????????????font-weight: normal; ???????????????????????????font-size: 14px; ???????????????????????????padding-left: 23px; ???????????????????????????cursor: default; ???????????????????????????position: relative; ???????????????????????????>i.iconfont { ???????????????????????????????display: block; ???????????????????????????????width: 23px; ???????????????????????????????height: 100%; ???????????????????????????????text-align: center; ???????????????????????????????font-size: 12px; ???????????????????????????????position: absolute; ???????????????????????????????left: 0; ???????????????????????????????top: 0; ???????????????????????????????&:hover { ???????????????????????????????????color: #008cee; ???????????????????????????????????cursor: pointer; ???????????????????????????????} ???????????????????????????} ???????????????????????????>span.label { ???????????????????????????????color: #555; ???????????????????????????????>em { ???????????????????????????????????font-size: 12px; ???????????????????????????????????font-style: normal; ???????????????????????????????????color: #888; ???????????????????????????????} ???????????????????????????} ???????????????????????????&:hover { ???????????????????????????????background-color: #ddd; ???????????????????????????????span.T_set { ???????????????????????????????????display: block; ???????????????????????????????} ???????????????????????????} ???????????????????????????span.T_set { ???????????????????????????????float: right; ???????????????????????????????margin-right: 10px; ???????????????????????????????display: none; ???????????????????????????????i.iconfont { ???????????????????????????????????display: inline-block; ???????????????????????????????????padding: 0 2px; ???????????????????????????????????font-size: 13px; ???????????????????????????????????&:hover { ???????????????????????????????????????color: #008cee; ???????????????????????????????????????cursor: pointer; ???????????????????????????????????} ???????????????????????????????} ???????????????????????????} ???????????????????????} ???????????????????} ???????????????}参考链接：
https://www.cnblogs.com/caihg/p/6208105.html
vue.js 树菜单 递归组件树来实现
原文地址：http://www.cnblogs.com/xiangsj/p/7843477.html