序文多くの学生は既に再帰に精通していると思います。アルゴリズムの問題を解決するために再帰がよく使用されます。たとえば、古典的なものは次のとおりです。数字でいっぱいの配列から、合計が目標の数字に等しい組み合わせを見つけます。アイデアは難しくありません。配列をループして値を取得し、目標数値の条件が満たされるまで再帰的に追加します。再帰はほとんどの問題を解決できますが、無限ループやスタック オーバーフローを引き起こすコードが簡単に記述できるという欠点があります。次に、実際のビジネス シナリオに基づいて、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) }, 再帰コンポーネントでは、このコンポーネントは子コンポーネントと親コンポーネントの両方の役割を果たすことがよくあります。したがって、データ間の相互作用を制御する必要があります。そうしないと、データの混乱が発生しやすくなります。 まとめこの記事は、著者が実際のビジネス シナリオで遭遇したことを記録したものです。再帰コンポーネントを使用すると、さらに複雑なグラフィック表示も完成します。これがあなたの考えを広げるのに役立つことを願っています。もし役に立ったら、私に少しハートをください(次回は絶対に断ります [doge]) 上記は、vue 再帰コンポーネントの簡単な使用例の詳細です。vue 再帰コンポーネントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Vue 要素と Nuxt の使用に関するヒントを共有する
>>: vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード
この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...
1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...
1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...
この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...
問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...
選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...
webpack をパッケージ化する前に、次の作業が完了していることを確認する必要があります。 1) ...
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...
# VMware ハードディスクの起動優先順位を調整するステップ 1: 電源をオンにすると、BIOS...
目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...
デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...
1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
新しいLinuxサーバーを入手する場合、通常は次の5つの構成を実行する必要があります。 HOSTAN...