纯数据驱动的侧边菜单组件封装

   对于层级比较深的侧边菜单栏需求，常见的前端UI导航菜单栏组件的模板使用起来会比较复杂一点，主菜单和子菜单之间的嵌套关系会随之加大，你需要根据最大的层级去写你的模板内容，而且一旦层级加深，你的模板代码就需要再去维护一下。那么为了一劳永逸，就抽了时间写了一个纯数据驱动的侧边菜单栏组件，下面是最终实现的动态效果图：

 

 

    上面是该组件的两种展开模式展示（是否只保持一个子菜单的展开），所使用的数据如下：

      [
        {
          name: '菜单1'
        },
        {
          name: '菜单2',
          children: [
            {name: '菜单2-1'},
            {name: '菜单2-2'}
          ]
        },
        {
          name: '菜单3',
          children: [
            {name: '菜单3-1', children: [{name: '菜单3-1-1'}]},
            {name: '菜单3-2', children: [{name: '菜单3-2-1'}]},
          ]
        },
        {
          name: '菜单4',
          children: [
            {name: '菜单4-1', children: [{name: '菜单4-1-1', children: [{name: '菜单4-1-1-1'}]}]}
          ]
        }
      ]

    想要把这种结构的数据渲染成具有上下级关系的菜单就需要用到递归组件的思想。思想有了之后，我们就可以来拆分组件的几个设计点了，具体如下：

1.  组件的折叠动画：可以利用vue的transition过渡动画实现。
2.  如何让所有子组件共享公共信息，例如当前的激活菜单：作为独立组件来说就不适合用vuex来做状态管理了，这里通过provide / inject, 让一个祖先组件向其所有子孙后代注入一个该祖先的实例依赖，这样就可以把公共信息放在这个祖先实例上。

 其他需要实现的基本功能点罗列：
      1.初始化菜单是否默认全部展开
      2.是否只保持一个子菜单的展开
      3.菜单栏宽度自由设置 （增加组件配置灵活性）
      4. 指定显示的菜单名和唯一标识字段 （增加组件配置灵活性）
      5. 指定默认激活的菜单
      6. 是否使用vue-router的模式，启用该模式会在激活导航时以path字段值进行路由跳转
      7. 等等......

    有了设计点之后就可以开始码代码了，下面是菜单组件折叠动画的代码：

    不熟悉过渡的朋友可以去补一下vue的transition部分。这里之所以用函数式组件是因为这个过渡的组件不需要维护自身的状态数据，设置成函数式组件可以降低渲染开销。

    下面是菜单栏的祖先组件代码，具体如下：

    这部分代码主要做了一个数据的二次封装，对原始数据增加了菜单折叠状态，父子组件关系，所在层级等等。其它就是往外抛出了一个clickMenu事件，这是考虑到路由跳转的控制权限问题，如果组件的router模式不适用你的应用场景，那么就可以通过监听clickMenu事件，去实现自己的控制逻辑。

    重头戏来了，下面是递归组件的代码：

     此处的一些样式用到了scss的变量，这样是为了可以方便的换成自己的主题色。其他就是一些业务的实现了，因为祖先组件做了数据的二次封装，所以一些功能就可以比较方便的实现了，比如说isCollapse 结合 hb-menu-collapse-transition实现最终的折叠动画效果。利用parent 可以确定当前操作子菜单的所有上级菜单来实现对上级的折叠控制等等。

    数据驱动组件的好处就是使用时的模板写法可以极大的简化，也比较利于做自适应。关于数据驱动的侧边栏菜单组件封装就介绍到这里了，如有任何疑问，可与下方留言。