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

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

序文

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

Vueでの使用

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

  1. 再帰に入る条件を決定します。
  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 の動的コンポーネントと非同期コンポーネントの詳細な理解
  • Vue が Ref を使用してレベル間でコンポーネントを取得する手順
  • Vueはマルチタブコンポーネントを実装します
  • Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?
  • Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
  • Vue の親コンポーネントと子コンポーネント間の通信の例 (props、$ref、$emit)
  • Vue マウントコンポーネントの使用
  • Vue は他のコンポーネント (css と js) をどのように参照しますか
  • vue-dialog のポップアップ レイヤー コンポーネント
  • Vueコンポーネントの基本のまとめ

<<:  Vue 要素と Nuxt の使用に関するヒントを共有する

>>:  vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード

推薦する

MySQLデータベーステーブルの容量を確認する方法の例

この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

CentOS サーバーの時間を北京時間に変更する方法

1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

Dockerコンテナにvimコマンドがない問題を解決する方法

問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...

MySQL ステートメントの実行順序と書き込み順序の例の分析

選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...

Webpack ファイル パッケージ化エラー例外

webpack をパッケージ化する前に、次の作業が完了していることを確認する必要があります。 1) ...

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...

VMware仮想マシンの起動時に黒い画面が表示される問題を解決する

# VMware ハードディスクの起動優先順位を調整するステップ 1: 電源をオンにすると、BIOS...

Vue の双方向イベントバインディング v-model の原理についての簡単な説明

目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

HTML のフォームフォームのメソッド属性の紹介

1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...

display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

Linux で一般的なソフトウェアを設定する方法

新しいLinuxサーバーを入手する場合、通常は次の5つの構成を実行する必要があります。 HOSTAN...