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

<テンプレート>
   <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))
        })
        戻る {
            ハンドルクリック、
            子メニューインデックス、
            コンテキストメニューイベントを非表示にする
        }
    }
})
</スクリプト>

<テンプレート>
    <テレポート先 = '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)
  })