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 テーブルで動的な列フィルタリングを実装するためのサンプルコード

推薦する

CSV、Excel、SQL ファイルを MySQL にインポートするためのヒント

1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

SVN のインストールと基本操作 (グラフィック チュートリアル)

目次1. SVNとは何か2. SVNサーバーとクライアントの取得方法3. SVN ワークフローとアー...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

WeChatアプレットのスクロールビューが左右連動効果を実現

WeChatアプレットはスクロールビューを使用して左右のリンクを実現します。参考までに、具体的な内容...

CentOS 7 での mysql 5.7 のインストール チュートリアル

1. 公式MySQL Yumリポジトリをダウンロードしてインストールする 実行ファイル: mysql...

MySQL セレクトキャッシュメカニズムの使用に関する詳細な説明

MySQL クエリ キャッシュはデフォルトでオンになっています。ある程度、クエリの効果は向上しますが...

HTML コマンドラインインターフェースの実装

HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

Reactの3つの主要属性におけるpropsの使用の詳細な説明

目次クラスコンポーネント機能コンポーネントプロパティは読み取り専用ですコンポーネント間通信前回は状態...

メタタグコードを使用して、360 デュアルコアブラウザを互換モードではなく高速モードにデフォルト設定します。

あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...