vue3 再帰コンポーネントカプセル化の全プロセス記録

vue3 再帰コンポーネントカプセル化の全プロセス記録

序文

今日、プロジェクトを作成しているときに、カスタムの右クリック メニューが必要になることに気付きました。メニューにはサブメニューがあるので、このときは再帰コンポーネントが使用されます。そこで、再帰コンポーネントの作成プロセスを記録するためにこの記事を書きました。

1. 再帰コンポーネント

再帰コンポーネントは、その名前が示すように、コンポーネント自体の中で自分自身を呼び出します。そこで、まずコンポーネントを構築し、その中で自分自身を呼び出します。一般的な再帰コンポーネントは、私たちのプロジェクトでよく使用されるツリー コンポーネントです。以下は、プロジェクト要件を満たすために実装した再帰コンポーネントのソース コードです。

<テンプレート>
   <ul class="リストコンテナ">
       <li v-for="(item,index) in listData" 
            :key="インデックス" class="リスト項目" 
            @click.prevent.stop="handleClick($event,item)"
            @mouseover="childrenMenuInde​​x=インデックス"
            >
           <span class="list-item_span">
               {{item.text}}
           </span>
           <CaretRightOutlined v-if="item.children" />
           <!-- 自分自身を呼び出すかどうかを決定する -->
           <div v-if="item.children&&childrenMenuInde​​x===index"
            クラス="コンテキストメニューコンテキストメニュー_children"
           >
            <!-- コンポーネント自体を呼び出す -->
            <list-comp :list-data='item.children' @hideContextMenu='hideContextMenuEvent' />
           </div>
       </li>
   </ul>
</テンプレート>
<スクリプト>
「vue」からdefineComponent、refをインポートします。
'@ant-design/icons-vue' から {CaretRightOutlined} をインポートします。
エクスポートデフォルトdefineComponent({
    名前:'リストコンプ',
    小道具:{
        リストデータ:{
            タイプ:配列、
            デフォルト:()=>[]
        }
    },
    コンポーネント:{
        右矢印
    },
    放出:
        「コンテキストメニューを非表示」
    ]、
    セットアップ(props,{emit}){
    	//クリックイベント const handleClick=(event,{text,callBack})=>{
            出力('コンテキストメニューを非表示');
            //callBack は渡されたコールバック関数です。渡された場合、カスタムコールバック関数が呼び出されます if (callBack) {
                折り返し電話();
                戻る;
            }
        }
        const コンテキストメニューイベントを非表示にする=()=>{
            出力('コンテキストメニューを非表示');    
        }
        //現在選択されているメニュー項目を識別するために使用されます const childrenMenuInde​​x=ref(-1);
        const eventNames=['クリック','コンテキストメニュー'];
        マウント時(()=>{ 
            イベント名.forEach(イベント名=>window.addEventListener(イベント名、hideContextMenuEvent))
        })
        マウント解除前に(()=>{
            イベント名.forEach(イベント名=>window.removeEventListener(イベント名、hideContextMenuEvent))
        })
        戻る {
            ハンドルクリック、
            子メニューインデックス、
            コンテキストメニューイベントを非表示にする
        }
    }
})
</スクリプト>

予防

  • 再帰コンポーネント自体の内部では、自分自身を呼び出すときに、再帰コンポーネント上の emitting を介して自分自身が送信したカスタム イベントを受信する必要があります。受信後、コンポーネント内の emitting を介して再度カスタム イベントをトリガーします。
  • クリック イベントをリッスンすることで、emit を通じてカスタム イベントをトリガーし、コンポーネントの外部でリッスンすることができます。また、props を通じてコン​​ポーネントにデータを渡すときにコールバックを自分で構築することもできるため、emit を通じてカスタム イベントをトリガーする必要はありません。
  • 再帰コンポーネント内のメニュー項目をクリックしたときは、再帰コンポーネントを破棄する必要があります。必要なのは、再帰コンポーネント内でイベント バブリングを介してクリック、コンテキスト メニューなどのイベントをリッスンしてコンポーネントを破棄し、外部が受信できるように、emit を介してカスタム イベントをトリガーして、コンポーネントを破棄するという目的を達成することだけです。
  • 再帰コンポーネント内でクリック イベントを呼び出す場合は、イベントのバブリングとデフォルト イベントを防止する必要があります。クリック イベントの後に click.prevent.stop を追加すると、イベントのバブリングとデフォルト イベントを防ぐことができます。

2. 右クリックメニューコンポーネント

私のプロジェクトでは、コンポーネントを使用して右クリック メニューを実装します。もちろん、プラグインを通じて実装することもできます。ここでの右クリック メニューは、本質的には再帰コンポーネントの二次カプセル化です。実際、二次カプセル化は必要ありません。再帰コンポーネントを右クリック メニューとして直接使用できます。

<テンプレート>
    <テレポート先 = 'body' >
        <div class="content-menu_container" :style="styleObj">
            <リスト要素 
                :list-data='メニューデータ'
                @hideContextMenu='windowClickHandler'
             />
        </div>
    </テレポート>
</テンプレート>
<スクリプト>
「vue」からdefineComponentをインポートします。
「./list-comp.vue」からListCompをインポートします。
エクスポートデフォルトdefineComponent({
    名前:"コンテキストメニュー",
    コンポーネント:{
        リストコンプ
    },
    小道具:{
        スタイルオブジェクト:{
            タイプ:オブジェクト、
            デフォルト:()=>{}
        },
        メニューデータ:{
            タイプ:配列、
            デフォルト:()=>[]
        }
    },
    出力:['closeContextMenu'],
    セットアップ(props,{emit}){
        定数windowClickHandler=()=>{
            出力('コンテキストメニューを閉じる')
        };
        戻る {
            ウィンドウクリックハンドラ、
        }
    }
})
</スクリプト>

予防

プロジェクト内で右クリック メニューを呼び出す場合は、まずウィンドウ自体の右クリック メニュー イベントを無効にする必要があります。次に、独自のカスタム メニュー イベントを実装します。実装コードを以下に示します。

const showContextMenu=(イベント)=>{
    // デフォルトのイベントを無効にしてバブルを防止します。event.stopPropagation();
    イベントをデフォルトにしない();
    状態.showContextMenu=true;
    状態.styleObj={
      左:event.clientX+ "px",
      上:event.clientY+'px'
    }
  }
  //ウィンドウ自体の右クリックメニューイベントを監視する onMounted(()=>{
    window.addEventListener('コンテキストメニュー',showContextMenu)
  })
  マウント解除前に(()=>{
    window.removeEventListener('コンテキストメニュー',showContextMenu)
  })

要約する

これで、vue3 再帰コンポーネント カプセル化に関するこの記事は終了です。vue3 再帰コンポーネント カプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します
  • ツリー メニューを実装するための Vue.js 再帰コンポーネント (例の共有)
  • Vuejsは再帰コンポーネントを使用してツリーディレクトリを実装します
  • Vue.js 再帰コンポーネントの学習
  • ツリーメニューを実装するための Vue2 再帰コンポーネント
  • Vue3 再帰コンポーネントの使い方を 10 分で学ぶ

<<:  MySQL のデータ型とスキーマの最適化の詳細な説明

>>:  Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順

推薦する

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

TypeScript 列挙の基本と例

目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...

Sublime / vscode による HTML コード生成の迅速な実装

目次基本的なHTML構造div とクラス名のショートカット キーを生成するクラス名を持つdiv ID...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

MYSQL(電話番号、IDカード)データ非感応化の実装

1. データ感度低下の説明日常の開発ニーズでは、データの感度低下が頻繁に発生します。たとえば、ID ...

JS での矢印関数と this の記述と理解

目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...

ユニアプリとミニプログラム(画像とテキスト)を下請けする方法を教えます

目次1. ミニプログラム下請け2. Uniapp 下請けアプレット下請けの手順: 1. manife...

CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...

jsはショッピングカートの加算と減算、価格計算機能を実現します

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...

Web 開発チュートリアル クロスドメイン ソリューションの詳細な説明

序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...