Vue.js 再帰コンポーネントはツリー メニューを実装します

import Vue from 'vue'
Vue.config.debug = true
import main from './components/main.vue'
new Vue({
 el: '#app',
 render: h => h(main)
})

<template>
 <p class="tree-menu">
 <ul v-for="menuItem in theModel">
 <my-tree :model="menuItem"></my-tree>
 </ul>
 </p>
</template>
<script>
var myData = [
 {
 &#39;id&#39;: &#39;1&#39;,
 &#39;menuName&#39;: &#39;基础管理&#39;,
 &#39;menuCode&#39;: &#39;10&#39;,
 &#39;children&#39;: [
 {
 &#39;menuName&#39;: &#39;用户管理&#39;,
 &#39;menuCode&#39;: &#39;11&#39;
 },
 {
 &#39;menuName&#39;: &#39;角色管理&#39;,
 &#39;menuCode&#39;: &#39;12&#39;,
 &#39;children&#39;: [
 {
 &#39;menuName&#39;: &#39;管理员&#39;,
 &#39;menuCode&#39;: &#39;121&#39;
 },
 {
 &#39;menuName&#39;: &#39;CEO&#39;,
 &#39;menuCode&#39;: &#39;122&#39;
 },
 {
 &#39;menuName&#39;: &#39;CFO&#39;,
 &#39;menuCode&#39;: &#39;123&#39;
 },
 {
 &#39;menuName&#39;: &#39;COO&#39;,
 &#39;menuCode&#39;: &#39;124&#39;
 },
 {
 &#39;menuName&#39;: &#39;普通人&#39;,
 &#39;menuCode&#39;: &#39;124&#39;
 }
 ]
 },
 {
 &#39;menuName&#39;: &#39;权限管理&#39;,
 &#39;menuCode&#39;: &#39;13&#39;
 }
 ]
 },
 {
 &#39;id&#39;: &#39;2&#39;,
 &#39;menuName&#39;: &#39;商品管理&#39;,
 &#39;menuCode&#39;: &#39;&#39;
 },
 {
 &#39;id&#39;: &#39;3&#39;,
 &#39;menuName&#39;: &#39;订单管理&#39;,
 &#39;menuCode&#39;: &#39;30&#39;,
 &#39;children&#39;: [
 {
 &#39;menuName&#39;: &#39;订单列表&#39;,
 &#39;menuCode&#39;: &#39;31&#39;
 },
 {
 &#39;menuName&#39;: &#39;退货列表&#39;,
 &#39;menuCode&#39;: &#39;32&#39;,
 &#39;children&#39;: []
 }
 ]
 },
 {
 &#39;id&#39;: &#39;4&#39;,
 &#39;menuName&#39;: &#39;商家管理&#39;,
 &#39;menuCode&#39;: &#39;&#39;,
 &#39;children&#39;: []
 }
];
import myTree from &#39;./common/treeMenu.vue&#39;
export default {
 components: {
 myTree
 },
 data() {
 return {
 theModel: myData
 }
 }
}
</script>