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>