12.17 vue递归组件

recursion 递归

使用递归组件可以方便地在组件内部递归地渲染子节点。例如，可以使用一个名为 tree-node 的组件，该组件在其模板中递归地包含自身，并在每一层次上显示节点的标签和其子节点。这样，当数据发生变化时，组件会自动重新渲染，并保持节点层次结构的正确性。

![[850X850.PNG]]

多级菜单数据

data.js

const data = [
    {
        id: 1,
        title: '汉堡店',
        cont: [
            {

                id: 2,
                title: '小吃系列',
                cont: [
                    { id: 3, title: '轰炸大鱿鱼'},
                    { id: 4, title: '香酥鸡柳'},
                    { id: 5, title: '脆皮土豆'}
                ]
            },
            {

                id: 6,
                title: '汉堡系列',
                cont: [
                    { id: 7, title: '深海鳕鱼堡'},
                    { id: 8, title: '香辣鸡腿堡'},
                    { id: 9, title: '劲脆鸡腿堡'}
                ]
            },
            {

                id: 10,
                title: '饮品系列',
                cont: [
                    { id: 11, title: '可口可乐'},
                    { id: 12, title: '雪碧'},
                    { id: 13, title: '冰淇淋'}
                ]
            }
        ]
    },
    {
        id: 11,
        title: '牛排店',
        cont: [
            {

                id: 12,
                title: '牛排系列',
                cont: [
                    { id: 13, title: '黑椒牛排'},
                    { id: 14, title: '西冷牛排'},
                    { id: 15, title: '菲力牛排'}
                ]
            },
            {

                id: 16,
                title: '咖啡系列',
                cont: [
                    { id: 17, title: '卡布奇诺'},
                    { id: 18, title: '摩卡'}
                ]
            },
            {

                id: 20,
                title: '沙拉系列',
                cont: [
                    { id: 21, title: '水果沙拉'},
                    { id: 22, title: '鸡胸肉沙拉'},
                    { id: 23, title: '牛排沙拉'}
                ]
            }
        ]
    },
    {
        id: 31,
        title: '红酒店',
        cont: [
            {

                id: 32,
                title: '国产葡萄酒系列',
                cont: [
                    { id: 33, title: '长城红标'},
                    { id: 34, title: '张裕二星'},
                    { id: 35, title: '王朝干红'}
                ]
            },
            {

                id: 36,
                title: '进口葡萄酒系列',
                cont: [
                    { id: 37, title: '法国都夏'},
                    { id: 38, title: '拉菲庄园'},
                    { id: 39, title: '卡斯特.巴蒂'}
                ]
            },
            {

                id: 40,
                title: '洋酒系列',
                cont: [
                    { id: 41, title: '杰克丹尼'},
                    { id: 42, title: '人头马部落'},
                    { id: 43, title: '轩尼诗VSOP'}
                ]
            }
        ]
    }
]
export default data

递归****组件定义

Vue3

递归****组件的父组件

<script setup>
    import foodMenu from './foodMenu.vue';
    import menuData from './data.js'
</script>
<template>
   <div class="recursion">
       <h3>递归组件的父组件</h3>
       <foodMenu :menu-data="menuData"></foodMenu>
   </div>
</template>
<style lang="scss" scoped>
</style>

递归****组件

<script setup>
defineProps({
    menuData: Array
})
</script>
<template>
    <ul>
        <li v-for="menu in menuData" :key="menu.id">
            <p>---{{ menu.title }}</p>
            <food-menu :menu-data="menu.cont"></food-menu>
        </li>
    </ul>
</template>
<style lang="scss" scoped></style>

Vue2

递归****组件的父组件

<template>
  <div id="app">
    <food-menu :menu-data="menuData"></food-menu>
  </div>
</template>
<script>
import menuData from "./data";
import foodMenu from './FoodMenu.vue'
export default {
  data(){
    return {
      menuData: menuData
    }
  },
  components: {
    foodMenu
  }
};
</script>
<style lang="scss">
</style>

递归****组件

foodMenu.vue

递归组件的技术要点： 一定要设置name属性，递归使用时，用得就是name属性的值

<template>
  <ul>
    <li v-for="menu in menuData" :key="menu.id">
      <p>---{{ menu.title }}</p>
      <food-menu :menu-data="menu.cont"></food-menu>
      <!--
          等价于:
          <ul>
              <li>
                  <p></p>
                  <ul>
                      <li>
                          <p></p>
                      </li>
                  </ul>
              </li>
          </ul>
       -->

    </li>
  </ul>
</template>
<script>
export default {
  // 组件的name属性有三种用法
  // 1. <keep-alive include="组件的name"></keep-alive>
  // 2. vue devtools 显示组件的name
  // 3. 递归组件
  name: "foodMenu",
  props: ["menuData"],
  data() {
    return {};
  },
};
</script>
<style>
</style>