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 を使用する詳細な手順

推薦する

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...

base target="" はフレームを開くためのベースリンクのターゲットを指定します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

CocosCreatorプロジェクト構造の仕組みの詳細な説明

目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

MySQL 8.0.11 Mac 用インストール ガイド

MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...

セマフォによるTomcatの異常終了の解決方法

最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...

IE8は優れたエクスペリエンスを提供します: アクティビティ

今日は IE8 ベータ 1 (以下、IE8 と略します) をチラ見しました。IE8 は素晴らしい体験...

docker で nginx+php+mysql を設定する方法

まず、方法を理解します。 docker exec を使用して Docker コンテナに入るDocke...

docker --privileged=true パラメータの役割についての簡単な説明

バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

Linux ユーザーとグループのコマンド例分析 [切り替え、ユーザーの追加、権限制御など]

この記事では、Linux のユーザーおよびグループのコマンドについて例を挙げて説明します。ご参考まで...

QTとJavaScript間のインタラクティブデータの実装

1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...

MySQLのconcat関連関数の詳細な説明

1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...