Vueテクノロジーに基づく再帰コンポーネントの実装方法

<!-- ツリー ツリー コンポーネント -->
<テンプレート>
  <div class="コンテナ">
      <div v-for="treeData 内の項目" :key="項目">
        <div class="row" @click="extend(item)">
            <span
                ref="アイコン"
                クラス="アイコン-共通"
                :class="{
                    'アイコンダウン': item.children,
                    'アイコンラジオ': !item.children,
                    'アイコン回転': item.isExtend
                }"
            </span>
            <span class="title">{{ item.title }}</span>
        </div>
        <div v-if="isExtend(item)" class="children">
            <tree :tree-data="item.children" :is-extend-all="isExtendAll" />
        </div>
  </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具: {
        // コンポーネントデータ treeData: {
            タイプ: 配列、
            デフォルト： []、
        },
        // デフォルトですべて展開するかどうか isExtendAll: {
            タイプ: ブール値、
            デフォルト: true、
        }
    },
    メソッド: {
        // リストを展開する extend(item) {
            if (item.children) {
                アイテムを拡張します。
            }
        },
        isExtend(アイテム) {
            const isExtend = !item.isExtend && true;
            this.isExtendAll を返します。isExtend: !isExtend;
        }
    }
}
</スクリプト>

<スタイルスコープ>
。容器 {
    フォントサイズ: 14px;
}
。行 {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    カーソル: ポインタ;
    下マージン: 10px;
}
/* ----------- アイコンスタイル START ------------- */
.アイコン共通 {
    表示: インラインブロック;
    遷移: すべて .3;
}
.アイコンダウン{
    幅: 0;
    高さ: 0;
    境界線: 4px 透明実線;
    上境界線: 6px 実線 #000;
    下部境界線: なし;
}
.icon-radio {
    幅: 6px;
    高さ: 6px;
    背景: #000;
    境界線の半径: 50%;
}
.アイコン回転{
    変換: 回転(-90度);
}
/* ----------- アイコンスタイル END ------------- */
。タイトル {
    左マージン: 10px;
}
。子供たち {
    左パディング: 20px;
}
</スタイル>

<テンプレート>
 <tree :tree-data="ツリーデータ" />
</テンプレート>

<スクリプト>
'./components/tree.vue' から Tree をインポートします。

エクスポートデフォルト{
 コンポーネント:
  木、
 },
 データ（） {
  戻る {
   ツリーデータ: [
    {
     タイトル: 「レベル 1 リスト 1」、
     子供たち： [
      {
       タイトル: 「二次リスト 1」
                            子供たち： [
                                {
                                    タイトル: 「レベル 3 リスト 1」、
                                }
                            ]
      },
      {
       タイトル: 「二次リスト 2」
      }
     ]
    },
    {
     タイトル: 「レベル 1 リスト 2」
     子供たち： [
      {
       タイトル: 「二次リスト 1」
      },
      {
       タイトル: 「二次リスト 2」
      }
     ]
    },
    {
     タイトル: 「レベル 1 リスト 3」
     子供たち： [
      {
       タイトル: 「レベル 3 リスト 1」、
      },
      {
       タイトル: 「レベル 3 リスト 2」
      },
      {
       タイトル: 「レベル 3 リスト 3」、
      }
     ]
    }
   ]
  }
 }
}
</スクリプト>