21-树形结构菜单之封装递归组件

场景：

当我们菜单的数据是由后端返回的，我们不确定有多少层级，通过遍历循环数据生成的菜单，而不是我们写死。我们就可以用到递归组件。

在页面级组件上，我们想要的数据结构是这样的：

 

 

 先看一下组件结构：

1.页面级组件menu-page：请求拿到数据，分发给递归组件

      item，所以我们需要用template包裹一下
      注意template不允许上面写key，我们需要写在要循环的组件上 --><template v-for="(item, index) in list">
                <a-menu-item v-if="!item.children" :key="`menu_item_${index}`">{{ item.title }}
        <re-submenu v-else :key="`menu_item_${index}`" :parent="item" :index="index">

2.容器组件：a-menu，只有一个slot，用于盛放其他组件

export default {
  nmae: 'AMenu'}" _ue_custom_node_="true">.a-menu{  & *{
    list-style: none;
  }
  ul{
    padding: 0;
    margin: 0;
  }
}" _ue_custom_node_="true">

3.有children的ul组件：a-submenu.vue

^
    export default {
  nmae: 'ASubmenu',
  data () {    return {
      showChild: false
    }
  },
  methods: {
    handleClick () {      this.showChild = !this.showChild
    }
  }
}" _ue_custom_node_="true">.a-submenu{
  background: rgb(33, 35, 39);  &-title{
    color: #fff;
    position: relative;
    .shrink-icon{
      position: absolute;
      top: 4px;
      right: 10px;
    }
  }  &-child-box{
    overflow: hidden;
    padding-left: 20px;
  }
  li{
    background: rgb(33, 35, 39);
  }
}" _ue_custom_node_="true">

4.chilren下的每个li组件：a-menu-item

export default {
  nmae: 'AMenuItem'}" _ue_custom_node_="true">.a-menu-item{
  background: rgb(90, 92, 104);
  color: #fff;
}" _ue_custom_node_="true">

5.递归组件：re-subMenu

    {{ parent.title }}<template v-for="(item, i) in parent.children">
            <a-menu-item v-if="!item.children" :key="`menu_item_${index}_${i}`">{{ item.title }}
       如果当前这一项有children，就继续传递给当前组件，就又从上到下执行逻辑，结束条件就是没有children了，
      就显示title，递归结束 --><re-submenu v-else :key="`menu_item_${index}_${i}`" :parent="item">import menuComponents from '_c/menu'const { AMenuItem, ASubmenu } = menuComponents
export default {
  name: 'ReSubmenu',
  components: {
    AMenuItem,
    ASubmenu
  },
  props: {
    parent: {
      type: Object,      default: () => ({})
    },    // 这里父组件多传了一个index，是父组件和子组件都用了index作为key，
    // 重复了，传过来的目的就在于再拼一个index，以作异同    index: Number
  }
}" _ue_custom_node_="true">

就长这样：

---

 当后端给我们返回的数据格式并不是处理好的树形结构，我们需要自己转：

传送门：树形结构转数组，数组转转树形结构