Vue再帰コンポーネントの簡単な使用例

序文

多くの学生は既に再帰に精通していると思います。アルゴリズムの問題を解決するために再帰がよく使用されます。たとえば、古典的なものは次のとおりです。数字でいっぱいの配列から、合計が目標の数字に等しい組み合わせを見つけます。アイデアは難しくありません。配列をループして値を取得し、目標数値の条件が満たされるまで再帰的に追加します。再帰はほとんどの問題を解決できますが、無限ループやスタックオーバーフローを引き起こすコードが簡単に記述できるという欠点があります。次に、実際のビジネスシナリオに基づいて、Vue コンポーネントでの再帰の適用について説明します。

Vueでの使用

完全な再帰を完了するには、個人的に最も重要なポイントが 2 つあると思います。

再帰に入る条件を決定します。
再帰から抜け出すための条件を決定します。

最も重要なことは、再帰からいつ抜け出すかを決定することです。再帰コンポーネントは実際には非常に単純です。コンポーネント A がコンポーネント A を再度呼び出すだけで、再帰が形成されます。私が遭遇した次の業務を例に挙げてみましょう。ある日、私は多数のユーザーから異なるラベル条件に基づいて対象ユーザーをフィルタリングするという要件を受け取りました。そのため、次のような設計図があります。

一見すると混乱するかもしれませんが、実際には、注意深く分析すると、それほど難しいことではないことがわかります。図を見ると、多くの学生は、層の中に層が重なっている、いわゆる入れ子人形のようなものだと感じるでしょう。このようなグラフの場合、まずはどの単位が一番小さいかを分析します。上の図から、一番小さいのがこの単位であることが簡単にわかります。図の大きな構造は、基本的にこの小さな部分で構成されています。この部分が最初に実装されていれば、残りは再帰によってデータをレイヤーごとにレンダリングするだけです。

残りはデータ構造を判断するだけです。サブツリーがない場合は、単にアイテムをレンダリングします。アイテムにサブツリーが含まれている場合は、コンポーネントを再レンダリングし、子データを渡す必要があります。データ構造が次のようになっていると仮定すると、アイデアは実際には非常にシンプルです。

{
 タイプ: 'または'、
 値リスト: [
  {	
   条件: 「過去 7 日間のログイン回数」
   ログイン: '!=',
   値: 45
  },
  {	
   条件: 「過去 7 日間のログイン回数」
   ログイン: '!=',
   値: 45
  },
  {
   タイプ: 'and'
   値リスト: [
   	{
     条件: 「過去 7 日間のログイン回数」
     ログイン: '!=',
     値: 45
    }
   ]
  }
 ]
}

上記のデータ構造は非常に明確です。配列内のサブ項目に valueList が含まれている場合、上図で説明した小さなコンポーネントを再レンダリングする必要があることを示していることがわかります。したがって、次のように単純にコーディングできます (次のコードも最適化できます)。

<テンプレート>
 <div class="ラベルリスト">
  <el-tag type="primary" size="mini" class="logic">{{ typeDict[treedata.type] }}</el-tag>
  <template v-for="(item, index) in treedata.valueList">
   <ul v-if="!item.hasOwnProperty('valueList')" :key="'rule_' + インデックス">
    <li>{{ item.condition }} {{ item.logic }} {{ item.value }}</li>
   </ul>
  </テンプレート>
  <template v-for="(item, index) in treedata.valueList">
   <!-- ここでは値リストが存在すると判断されたため、レンダリング コンポーネントが再度呼び出され、サブ項目がレンダリングされます-->
   <label-shows-view v-if="item.hasOwnProperty('valueList')" :key="'tree_' + index" :treedata="item"></label-shows-view>
  </テンプレート>
 </div>
</テンプレート>
<スクリプト>
定数_TYPE = {
 「そして」: 「そして」,
 'または': 'または'
}
エクスポートデフォルト{
 名前: 'LabelShowsView',
 小道具: {
  ツリーデータ: {
   タイプ: オブジェクト、
   必須: true
  }
 },
 データ（） {
  戻る {
   型辞書: _TYPE
  }
 }
}
</スクリプト>

主なことは、データ構造内の繰り返し部分を分析して見つけ、レイヤーごとにレンダリングすることであることは容易に理解できます。実際、上記の例は、純粋に表示目的であれば比較的理解しやすいものです。ただし、データのやり取りがある場合は、特別な注意を払う必要があります。再帰レベルが非常に深い場合、イベントの送信とデータの変更は慎重に処理する必要があります。たとえば、顧客グループをフィルタリングするための上記のビジュアル構成を完了すると、次の図が表示されました。

サブ項目を追加したり削除したり、各グループをドラッグして位置を調整することもできます。このとき、子コンポーネントがイベントをトリガーし、イベントも受信する、バブリングに似た方法を使用できます。たとえば、条件セットを削除する場合は、次のように、子データのどの項目を削除するかを親コンポーネントに通知する必要があります。

<!-- labelRulesView.vue -->
<!-- このカスタム コンポーネントは、このコンポーネントの再帰コンポーネントです -->
<label-rules-view v-if="item.hasOwnProperty('valueList')" :label-list="labelList" :treedata="item" :current-index="index" @delGroup="funDelGroup"></label-rules-view>
<!-- このコンポーネントは delGroup イベントをリッスンします -->
 
<el-button size="mini" type="danger" icon="el-icon-delete" class="operate-btn" @click="handleDelNewGroup(currentIndex)"></el-button>

// グループを削除する handleDelNewGroup(index) {
 this.$emit('delGroup', index) // 上位レベルのコンポーネントにイベントをトリガーします},
funDelGroup(インデックス) {
 this.treedata.valueList.splice(インデックス、1)
},

再帰コンポーネントでは、このコンポーネントは子コンポーネントと親コンポーネントの両方の役割を果たすことがよくあります。したがって、データ間の相互作用を制御する必要があります。そうしないと、データの混乱が発生しやすくなります。