多级级联数据的展示-vue递归组件

如果采用普通的for循环方式，没办法确认数据到底有几层，要写几个for循环，所以想到了递归的方法。

那么在vue里然后实现呢？

vue递归组件（组件中使用自己）

父组件中把数据以props形式传给子组件

<template>
  <div class="cascader">
    <wb-cascader-tree :options="options"></wb-cascader-tree>
  </div>
</template>

<script>
import wbCascaderTree from './wb-cascader-tree'
export default {
  name: "wb-cascader",
  data(){
  return {
     options:   [
            {
                name: "一级菜单1",
                children: [
                    { name: "二级菜单1-1" },
                    {
                        name: "二级菜单1-2",
                        children: [
                            { name: "三级菜单1-2-1", children: [{ name: "四级菜单1-2-1-1" }] },
                        ],
                    },
                ],
            },
                { name: "一级菜单2" },
                {
                    name: "一级菜单3",
                    children: [{ name: "二级菜单3-1" }, { name: "二级菜单3-2" }],
                },
            ],
}
  },
  components:{
    'wb-cascader-tree':wbCascaderTree
  }

}
</script>

子组件，'wb-cascader-tree'。循环递归自身

<template>
<div>
  <div v-for="item in options">
    {{item.name}}
    <div v-if="item.children">
      <wb-cascader-tree :options="item.children"></wb-cascader-tree>
  </div>
  </div>
</div>
</template>
<script>
export default {
  name: "wb-cascader-tree",
  props:['options']
}
</script>

注意： 在组件中使用自己时，必须要保证有name属性，且name=组件名。如果你在你组件里使用了与name相同的标签，那么就是在使用自己。