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 データ テーブルの基本的な操作につい...

HTML 描画ユーザー登録ページ

この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...

Minio 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル

目次導入インストール1. マウントするフォルダを作成する2. イメージをプルする3. コンテナを作成...

Unicode署名BOMによる事故原因の分析

ここでは、通常ヘッダーとフッターに対して行われるインクルード ファイルを使用している可能性があります...

Linux sftp コマンドの使用法

SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...

Vue カプセル化 TabBar コンポーネントの完全なステップ記録

目次実装のアイデア:ステップ 1: TabBar と TabBarItem のコンポーネント カプセ...

JavaScript 上級プログラミング: 変数とスコープ

目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

Linux7 ベースの Hadoop のインストールと構成の詳細なグラフィック説明

上記のように材料を準備します(ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...

ウェブページのエンコードにおける GB2312、GBK、UTF-8 の違い

まず、GB2312、GBK、UTF-8 はすべて文字エンコーディングであることを理解する必要がありま...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...

Bツリー挿入プロセスの概要

前回の記事 https://www.jb51.net/article/154153.htm では、B...

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...

Linux ドメイン ネーム サービス DNS 設定方法

DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...