Vueコンポーネントの再帰（vueはコンポーネントの再帰を通じてマルチレベルのメニューレンダリングを実装します）

メニューのネストレベルの数がわかっている場合、レンダリングするメニューはv-forを介してループできますが、ループする必要のあるサブメニューのレベルの数がわからない場合、現時点ではv-forは問題を解決できません

動的なレンダリングを実現するために、メニューデータのレイヤーがいくつあるかわかりません。次の2つの解決策があります。

• domを操作してレイヤーごとにサブメニューを追加します（vueはdomの操作を推奨していないため、このソリューションは推奨されません）
• メニューをコンポーネントにカプセル化し、再帰的なコンポーネントを通じてメニューレンダリングを実装する

最初に
デモデモアドレスを投稿する：https://download.csdn.net/download/qq_25992675/12853870

1. 動的レンダリングメニュー
2. メニューのレンダリングをクリックしてサブメニューをロードできます

実際、コンポーネントの再帰は非常に単純です。コンポーネントで自分を呼び出すときに自分を登録する必要はありません。コンポーネントの名前を使用して、ページ上のラベルの形式で自分を呼び出すだけで済みます。

---

コンポーネントの再帰的な使用

ここでは、ペーストコードフラグメントのみが主に使用され、再帰のコンポーネントを説明しています。完全なデモキャリアデモを確認することをお勧めします

コンポーネント宣言

注意点：

1. メニュー：コンポーネントの名前。定義された名前を使用して自分自身を呼び出すことができます：「メニュー」をラベルとして使用します
2. サブメニューまたは空白のパーツがクリックされたときに親メニューのクリックイベントがトリガーされないようにするには、@ click.stop属性をコンポーネントに追加する必要があります
3. 私のメニューには独自の選択されたスタイルがあるため、クラスにはいくつかの3値の判断があり、それは独自のニーズに応じて定義できます。

<template>
<div class="menu" @click.stop>
    <div v-for="(item, index) in menuList" :key="index" @click.stop :class="menu-item" @click="chooseMenu(index, item)">
        <span :class="item.checkIndex == index ? 'name choose-item' : 'name'">{
    
    {
    
    
        item.name
      }}</span>
        <span :class="item.checkIndex == index ? 'index choose-item' : 'index'">
            {
    
    {
    
     index + 1 }}
        </span>
        <Menu class="menu-children" :menuList="item.childrens" @back="back(index, $event)"></Menu>
    </div>
</div>
</template>

<script>
export default {
    
    
    name: "Menu",
    props: {
    
    
        menuList: Array,
    },
    methods: {
    
    
        /**
         * @author: yx
         * @method: 选择菜单，返回菜单信息以及列下标
         * @Date: 2020-09-17 10:40:18
         */
        chooseMenu(index, item) {
    
    
            let child = {
    
    
                index: [index],
                item,
            };
            this.$emit("back", child);
        },
        /**
         * @author: yx
         * @method: 向上次依次返回选择的菜单信息以及列下标
         * @Date: 2020-09-17 10:40:27
         */
        back(index, event) {
    
    
            event.index.push(index);
            this.$emit("back", event);
        },
    },
};
</script>

コンポーネント呼び出し

注意点：

1. 選択が行われるたびにスタイルを変更する必要がありますが、menListの値を変更した直後に再帰コンポーネントがdomを更新できないため、ここで更新を定義し、更新によってコンポーネントを更新します

<template>
	<div class="home">
	    <Menu v-if="refresh" :menuList="menuList" @back="back($event)"></Menu>
	</div>
</template>

<script>
import Menu from "../components/menu";
export default {
    
    
  name: "Home",
   data() {
    
    
        return {
    
    
            refresh: true,
            menuList: [{
    
    
                id: 1,
                name: "测试",
                checkIndex: 0,
                isFirst: true,
                childrens: [{
    
    
                   id: 2,
                    name: "测试1级1",
                    checkIndex: 0,
                    childrens: [{
    
    
                        id: 6,
                         name: "测试2级1",
                         checkIndex: 2,
                         childrens: [],
                     },
                     {
    
    
                        id: 7,
                         checkIndex: 2,
                         name: "测试2级2",
                         childrens: [],
                     }],
                 }],
            }],
            nowIndex: 0,
            columnIndex: [], // 列下标
        };
    },
    methods:{
    
    
    	 back(item) {
    
    }
    }
     components: {
    
    
        Menu,
    }
};
</script>