Vueはカスタムツリーコンポーネントを再帰的に実装します

<テンプレート>
  <div>
      <ul>
          <item :model='データ'></item>
      </ul>
  </div>
</テンプレート>
 
<スクリプト>
'./item' からアイテムをインポートします
エクスポートデフォルト{
    コンポーネント:{
        アイテム
    },
    データ（）{
        戻る {
            データ：{
                タイトル:"レベル 1",
                子供たち：[
                    {
                        タイトル:"レベル 1-1",
                        子供たち：[
                            {
                                タイトル:"レベル 3 1-1-1",
                                子供たち：[
                                    {
                                        タイトル:「レベル4 1-1-1-1」、
                                        子供たち：[
                                            {
                                                タイトル:"レベル 5 1-1-1-1-1"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },{
                        タイトル:「レベル1-2」、
                        子供たち：[
                            {
                                タイトル:「レベル3 1-2-1」
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</スクリプト>

<テンプレート>
  <li>
      <div @click="トグル">
          {{モデル.タイトル}}
          <span v-if="isFolder">[{{open?'-':'+'}}]</span>
      </div>
      <ul v-show="開く" v-if="isFolder">
          <item v-for="(child,index) in model.children" :model='child' :key='index'></item>
      </ul>
  </li>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前:'アイテム',
    小道具:{
        モデル：{
            タイプ:オブジェクト、
            必須:true
        }
    },
    データ（）{
        戻る {
            開く:false
        }
    },
    計算:{
        フォルダ(){
           this.model.children を返す && this.model.children.length>0
        }
    },
    方法:{
        トグル（）{
            if (this.isFolder) this.open =!this.open
        }
    }
}
</スクリプト>

<テンプレート>
  <div class="index">
      <木></木>
  </div>
</テンプレート>
 
<スクリプト>
    「@/components/tree」から Tree をインポートします。
    コンポーネント:{
        木
    }
</スクリプト>