vue3 递归菜单组件

有一个需求，就是不知道菜单到底有多少级，需要按照层级一层层地遍历出来

递归实现的三个流程：

1. 写函数
2. 写遍历条件
3. 设置终止条件

实现逻辑

1. 父请求子组件，并且把列表值转给子组件
2. 子组件遍历对象，发现有子对象就重新请求自己

具体代码：

父

<m-tree :options="state.stationList" :key="state.stationList"></m-tree> 
// state.stationList 对象值

子

tree.vue

<template>
    ...遍历代码
    // item.childlist && item.childlist.length 判断是否有子对象
    <ul v-show="!item.isOpened" v-if="item.childlist && item.childlist.length">
        <m-tree></m-tree>
    </ul>
    
</template>

<script setup>
   ...
   const newOptins = ref(props.options) // 重新赋值，以名污染原对象
</script>
<script>
export default {
  name: 'mTree' // 点击，这里必须export出去，否则不能递归
}
</script>