是可以实现滴

记得以前用react写过一个递归渲染菜单栏，当时就想过如果用vue如何实现。最近项目又用到了vue，就决定利用闲暇时间研究一下。render函数这种方法就不说了，和react的方法差不多，这里主要写一下vue组件之间的递归调用。

最后效果基本就是一个类似这种的树形结构，当然样式自己可以更改

渲染树的组件，循环父组件传过来的数据，如果有children就在递归调用自身组件name值

父组件只需要传过去数据就可以了，下面的组件引入方式参考vue文档

这个是可以的，我们可以先写一个递归组件list.vue，例如：

<template>

    <ul>

        <li v-for="child in list" :key="child.navId">

            <a href="">{{child.nav}}a>

            <Lists :list="child.children"/>

        li>

    ul>

template>

<script>

    export default {

        props: ['list'],

        name: 'Lists'

    }

script>

然后再父组件中menu.vue使用这个递归组件：

<template>

    <div>

        <ul>

            <li v-for="item in menu" :key="item.navId">

                <a href="">{{item.nav}}a>

                <List :list="item.children"/>

            li>

        ul>

    div>

template>

<script>

    import List from './list'

    export default {

        props: ['menu'],

        components: {

            List

        }

    }

script>

最后在使用父组件：

<Menu :menu="menu" />

这样就可以实现递归调用data里的数据了

渲染树的组件，循环父组件传过来的数据，如果有children就在递归调用自身组件name值

[removed]export default {  name: "myTree",
  props:{
    treedata:{      default:function(){        return []
      }
    }
  },
}

父组件只需要传过去数据就可以了，下面的组件引入方式参考vue文档

[removed]export default {
  name: "zp",
  data() {    return {
      treeData:[
        {text:1,children:[
          {text:2,children:[{text:5},{text:'55'}]},
          {text:3},
          {text:4},
        ]}
      ]
    };
  },
  components: {
    linTree: () => import('./components/treeContents')
  },
}

<template>

    <ul>

        <li v-for="child in list" :key="child.navId">

            <a href="">{{child.nav}}a>

            <Lists :list="child.children"/>

        li>

    ul>

template>

<script>

    export default {

        props: ['list'],

        name: 'Lists'

    }

script>

然后再父组件中menu.vue使用这个递归组件：

<template>

    <div>

        <ul>

            <li v-for="item in menu" :key="item.navId">

                <a href="">{{item.nav}}a>

                <List :list="item.children"/>

            li>

        ul>

    div>

template>

<script>

    import List from './list'

    export default {

        props: ['menu'],

        components: {

            List

        }

    }

script>

最后在使用父组件：

<Menu :menu="menu" />

记得以前用react写过一个递归渲染菜单栏，当时就想过如果用vue如何实现。最近项目又用到了vue，就决定利用闲暇时间研究一下。render函数这种方法就不说了，和react的方法差不多，这里主要写一下vue组件之间的递归调用。

最后效果基本就是一个类似这种的树形结构，当然样式自己可以更改