13.Vue技术栈开发实战-递归组件的使用

Z时代
2024-01-10
分类：综合

vue

这是iview的menu的组件

http://v3.iviewui.com/components/menu

每一个菜单的item

实际的项目中，菜单往往是根据后台的数据返回回来的。往往是一个数组，通过这里，遍历然后循环生成的这个菜单，而不是这样写死的、

这个时候就用到了递归组件，

先来添加一个示例页，添加一个路由列表的配置项menu_page

在视图中创建这个menu-page

在components下创建menu文件夹，然后，分别创建3个vue文件。分别是

a-menu.vue

a-menu-item.vue

a-submenu.vue：收缩菜单的部分（子菜单）

aMenu最外层是div

创建index.js文件

把三个vue组件都引进来。然后再用export导出去

在menu-page引入这三个组件。并注册组件，这个地方用ES6的拆分操作符。它可以把一个对象都拆开，把里面的属性都拿出来，然后扁平化的塞到components对象里面。

然后就可以调用组件了。

a-menu里面给它加一个样式

这样html内就加进来了

ES6的三个点拆分操作符的话，这样在使用这个组件的时候就没有智能提示了。

我们用解构赋值的形式，把这三个组件注册在这个地方。

这样在写这个组件的时候，会有智能提示

菜单内容：里面用户可以定义任何东西，所以在item组件内这里我们用一个插槽slot

subMenu里面也是一个插槽

再加一个具名插槽，到时候用来显示标题的地方

在menu-page.vue内，在页面上先来用一下

menu组件也要加上slot，a-menu.vue

给列表加一个样式

收缩的二级菜单

外层是一个aSubmenu里面也是menuItem

在subMenu里面我们之前定义了一个具名插槽，用来显示菜单的name值，

css属性加一个星，这样.a-menu下的所有样式都用list-style:none，这样菜单左边的小圆点就都没有了。

给item一个样式。给li加了一个背景色

二级菜单的标题也不要margin.

设置subMenu的样式。给最外层的div加个样式a-submenu.

把slot=title的也外层也放个div 给他一个class样式 a-submenu-title

<template>
  <ul class="a-submenu">
    <div class="a-submenu-title"><slot name="title"></slot></div>
    <slot></slot>
  </ul>
</template>
<script>
export default {
  name: 'ASubmenu'
}
</script>
<style lang="less">
.a-submenu{
  &-title{
    background: rgb(33, 35, 39);
  }
}
</style>

加上字体白色，二级菜单让他更明显显示

item也加上color为白色

把slot放在一个div里面，然后做一个收缩的效果。加载这个div上

如果需要控制它的显示隐藏，那么就需要v-show。肯定是通过一个变量来控制，默认是不显示的。

子菜单就没有显示了

通过点击title，切换它的显示与隐藏

点击显示子菜单

再次点击收回

加一个小图标的变化

让title这里知道当前是收缩还是展开的状态

隐藏的时候箭头朝下。如果showChild为false，那么就旋转180度

:style="{ transform: `rotateZ(${showChild ? 0 : 180 }deg)` }"

这样一个简单的菜单组件就封装好了。

嵌套

又嵌套一层

子菜单缩进效果↓↓↓↓

加一个缩进的效果，看出来层级的关系。修改下样式

递归

如何使用递归的形式把数据渲染出来。

data () {
    return {
      list: [
        {
          title: '1111'
        },
        {
          title: '2222'
        },
        {
          title: '3333',
          children: [
            {
              title: '3333-1'
            },
            {
              title: '3333-2',
              children: [
                {
                  title: '33333-2-1'
                },
                {
                  title: '33333-2-2'
                }
              ]
            }
          ]
        }
      ]
    }
  }

接下来要渲染数据list。先把这里原来写的注释掉。

先把子级别的菜单注释掉。渲染第一个级别，

一级菜单可以直接写a-menu-item 上v-for循环就可以。

但是因为我们待会还有二级的菜单，所以这里我们用template组件来渲染。

渲染子节点

封装一个递归组件，re-submenu.vue

引入subMenu和menuItem并注册

外层是a-submenu，里面是a-menu-item

如果有子菜单还是要嵌套一层a-submenu里面是a-menu-item

子节点调用当前这个组件。自己调用自己

自己调用自己，如果不设置条件的话，就会一直循环下去。这样就是个死循环。

所以。循环我们放在template上

每一个元素都有一个key

如果item没有children

显示的内容就是item.title

如果有children，既要显示它的title还要在下面遍历这个children

首先是显示title。

那么我们怎么把这个title传进去呢？首先在这里引入这ReSubmenu这个组件，

这里定义一个parent的属性，传入的就是上面的item对象。

title传进来之后，递归组件就知道用谁了。接收传递过来的属性parent

直接返回一个值的情况可以这么写

那么这里显示的parent的title

页面上出错

应该是key重复了。我们这里是0。这个地方就叫做menu_item_0

在递归组件这里还是 menu_item_0 所以肯定是有问题的。

所以我们应该同时把索引号也传进去，做一个拼接

递归组件内接收index。这里先改成i不用index了。因为我们要定义一个index的属性

这里是传入的index属性，然后再拼接上i

下面也是这样

页面还是报错

这里我们加上判断，如果有children才显示下面的递归对象。

递归组件内，这里也要写一个v-else

这里改成parent.children就没错了。

菜单就根据数组渲染出来了。

还可以有更深的层级。可以无线级的往下写。

这就是的递归组件的使用。

一定要注意一定要有个能够终止递归组件的条件。这里是用v-if 和v-else。

第二是递归组件一定要有一个name值

后面在讲能收缩的菜单的时候，还会用到递归组件

递归组件代码

<template>
  <a-submenu>
    <div slot="title">{{ parent.title }}</div>
    <template v-for="(item, i) in parent.children">
      <a-menu-item v-if="!item.children" :key="`menu_item_${index}_${i}`">{{ item.title }}</a-menu-item>
      <re-submenu v-else :key="`menu_item_${index}_${i}`" :parent="item"></re-submenu>
    </template>
  </a-submenu>
</template>
<script>
import menuComponent from '_c/menu'
const { AMenuItem, ASubmenu } = menuComponent
export default {
  name: 'ReSubmenu',
  components: {
    AMenuItem,
    ASubmenu
  },
  props: {
    parent: {
      type: Object,
      default: () => {}
    },
    index: Number
  }
}
</script>
<style>
</style>