vue递归组件实现多级应用完整版，含有递归组件传值

 myList.vue

<template>
  <div class="select">
    <div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div>
    <my-trees v-show="options1isShow" :list="list" @getResult="getResult"></my-trees>
  </div>
</template>
<script>
import myTrees from './treeMenus'
export default {
  components: {
    myTrees
  },
  data () {
    return {
      isTreeRoot:true,
      list: [
        {
          name: '黄焖鸡米饭',
          code:'001',
          cList: [
            { name: '二级黄焖鸡',code:'002', },
            {
              name: 'one chicken',
              code:'003',
              cList: [
                { name: '三级黄焖鸡',code:'004', cList: [{ name: '四级黄焖鸡',code:'005', }] }
              ]
            }
          ]
        },
        // { name: '2222222222' },
        // {
        //   name: '黄焖鸡米饭33333333',
        //   cList: [{ name: '二级黄焖鸡' }, { name: 'one chicken' }]
        // }
      ],
      options1isShow:false,
      result:''
    }
  },
  methods: {
       options1Show:function(){
            this.options1isShow=true;
        },
        getResult(val){
            console.log(val,'getResult')
            this.result=val.name
        }
  }
  
}
</script>
<style>
li,ul{
 list-style: none;
 padding:0;
 margin:0;
}
li{
 height:40px;
 line-height: 40px;
 border-bottom: 1px solid #ededed;
 box-sizing: border-box;
 text-align: center;
 cursor: pointer;
}
.select{
 position: relative;
}
.input_text>input{
 width:170px;
 height:30px;
 border:1px solid #ddd;
}
.options1,.options2{
 width:170px;
 height:200px;
 border:1px solid #ddd;
 position: absolute;
 background: #fff;
 /* overflow-y: auto; */
 
}
.options3{
    position: relative;
    width:170px;
    height:200px;
    border:1px solid #ddd;

    background: #fff;
    /* overflow-y: auto; */
    
}
.options2{
 left:170px;
 top:0;
 right: 0;
}
</style>

 treeMenus.vue

<template>
    <div class="options1">
        <ul class="options3">
        <li v-for="(option,index) in list" :key="index">
            <p  @click="changeStatus(option)">{{option.name}}<i :class="option.cList ? 'el-icon-arrow-right': ''"></i></p>
            <div class="options2" v-if="options2isShow">
                <tree-menus v-if="option.cList" :list="option.cList"></tree-menus>
            </div>
        </li>
        </ul>
    </div>
  
</template>
 <style>
ul {
  margin-top: 50px;
  padding-left: 20px !important;
}
</style>
<script>
// import treeMenus from './treeMenu2.vue'
export default {
  name: 'treeMenus',
  props: {
    list: Array
  },
  data() {
    return {
      scopesDefault: [],
      scopes: [],
      options2isShow:false,
      secondOptions:[],
      tree: null,
    }
  },
 
  methods: {
    changeStatus(val) {
        if(val.cList&&val.cList.length){
            this.options2isShow=true
        }
        else{
            console.log(val)
            this.tree.getResult(val)
        }
        // this.$emit('getResult',val)

    },
  },

  created() {
    // this.scope()
     let parent = this.$parent
       console.log(parent,'parent')
        while (parent && !parent.isTreeRoot) {
            parent = parent.$parent
        }
        this.tree = parent
        console.log(this.tree)
  }
}
</script>
<style>
li,ul{
 list-style: none;
 padding:0;
 margin:0;
}
li{
 height:40px;
 line-height: 40px;
 border-bottom: 1px solid #ededed;
 box-sizing: border-box;
 text-align: center;
 cursor: pointer;
}
.select{
 position: relative;
}
.input_text>input{
 width:170px;
 height:30px;
 border:1px solid #ddd;
}
.options1,.options2{
 width:170px;
 height:200px;
 border:1px solid #ddd;
 position: absolute;
 background: #fff;
 /* overflow-y: auto; */
 
}
.options3{
    position: relative;
    width:170px;
    height:200px;
    border:1px solid #ddd;

    background: #fff;
    /* overflow-y: auto; */
    
}
.options2{
 left:170px;
 top:0;
 right: 0;
}
</style>

使用递归组件init.vue

 <div class="step-two mt10">
         
             <myList></myList>
   </div>
<script>
  import myList from './module/myLIst'
  export default {
      components: {
      myList
    },
}
</script>

需要注意的有两点，

第一是递归父组件向子组件传值

第二是子组件找到根组件，将选择的值传递给根组件

细节方法可以继续优化，核心代码就是上面这些，希望对你有用