さらに騒ぎがなければ、直接、新鮮なドライに
もちろん、あなたがブートストラップ、ルータ、要素-UI、VUE-axiosの進歩をインストールする必要があります
1.再帰的な要素では、参照は人のでどこにでもと、それが誰であるか、具体的かわからない、コードの偉大な神で、ここで作られます
<テンプレート>
の<div>
<テンプレート-のために= V 'MENUでメニューリスト'>
<！ -あなたは、現在のサブメニューが表示されているエル・サブメニューを持っている場合は、再帰的なコンポーネントエルsubmentで呼び出す- >
<EL-サブメニュー
V = -if 'menu.children.length> 0'
：=インデックス'menu.name'
：キー= "menu.id"
>
<テンプレートスロット= "タイトル">
<I：クラス= "menu.icon"> </ I>
{} {} menu.name
</テンプレート>
< -ここに自分自身を呼び出すが鍵です- >！
<menuTree：メニューリスト= 'menu.children'> </ menuTree>
</ EL-サブメニュー>
<！-何のサブメニューが存在しない場合は、現在の内容を表示する- >
<項目-EL-MENUの
V-ELSE
：インデックス= 'menu.url'
：キー= 'menu.id'
>
<I：クラス= "menu.icon"> </ I>
{{menu.name}}
</ EL-メニュー項目>
</テンプレート>
</ div>
</テンプレート>
<スクリプト>
輸出デフォルト{
名： "MenuTree"、
小道具：{
メニューリスト：{
タイプ：配列、
必要な値：false
}
}
}
</ SCRIPT>
<スタイルスコープ>
</スタイル>
2.サブアセンブリのメニュー（メニュー）
/テンプレート> <スクリプト>
輸入MenuTree "./MenuTree"から。
輸出のデフォルト{
名前： 'メニュー'、
成分：{
MenuTree、
}、
小道具：{
メニューリスト：{
型：Array、
必要：偽
}
}
}
</ SCRIPT>
<スタイル>
{
表示：インラインブロック。
幅：100％;
オーバーフロー：隠されました;
}
.ELメニュー{
ボーダー：なし。
高さ：100％;
幅：100％重要;！
}
アクティブ.is> .EL-submenu__title {
色：＃重要なのf4f4f5;！
}
</スタイル>
引用された3.親コンポーネント（App.Vue）
<テンプレート>
<EL-容器>
<EL-ヘッダ>
XXXXXX
</ EL-ヘッダ>
<EL-容器>
<EL-脇>
<メニュー：メニューリスト= "メニューリスト"> </メニュー>
</ EL-脇>
<エル・メイン>
<ルータビュー> </ルータビュー>
</ EL-メイン>
</ EL-コンテナ>
</ EL-コンテナ>
</テンプレート>
<スクリプト>
インポートメニュー"./views/Menus"から;
輸出のデフォルト{
名：「アプリ」は、
コンポーネント：{
メニュー、
タイプ：配列、
必須：偽
}
}、
{）（搭載
this.axios.get（ '/メニュー/リスト'）
.then（RESP => {
this.menuList = resp.data.menuList;
}）
}
}
</スクリプト>
<スタイル>
.ELヘッダ{
背景色：＃0000AA。
色：#FFFFFF;
行の高さ：60PX;
フォントサイズ：28px;
}
.ELアサイド{
背景色：＃e3e3e3。
幅：200pxの重要;！
}
本体の.elテーブルth.gutter {
表示：テーブルセルの重要な;！
}
体の.elテーブルcolgroup.gutter {
表示：テーブルセルの重要な;！
}
</スタイル>
4.まとめ
アセンブリの使用再帰メニューリストのために> - >メニューコンポーネントメニューリスト - 親要素メニューリスト：再帰的プロセスを与えるために最も重要な要素、親コンポーネントとサブアセンブリのコンポーネントは、共通の再帰的に小道具、伝統的な価値観を持っています