vue递归组件

1、首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

既然要用递归组件，那么对我们的数据格式肯定是需要满足递归的条件的。就像下边这样，这是一个树状的递归数据。

    [
      {
        "name": "黄焖鸡米饭111111111",
        cList: [
          { "name": "二级黄焖鸡" },
          {
            "name": "one chicken",
            cList: [{ "name": '三级黄焖鸡3333', cList: [{ "name": "四级黄焖鸡" }] }]
          }
        ]
      },
      { "name": "2222222222" },
      {
        "name": "黄焖鸡米饭33333333", cList: [
          { "name": "二级黄焖鸡" },
          { "name": "one chicken" }
        ]
      },
    ]

接下来，我们就用这个树状数据，做一个简单版的树状菜单。树状菜单，也是递归组件最常用的方法之一。 

实践案例：

首先，我们先创建一个tree组件，这个组件作为使用递归组件的父组件，我们来看下具体写法

<template>
  <div>
    <my-trees :list="list"></my-trees>
  </div>
</template>
<script>
import myTrees from './treeMenus'
export default {
  components: {
    myTrees
  },
  data () {
    return {
      list: [
        {
          name: '黄焖鸡米饭111111111',
          cList: [
            { name: '二级黄焖鸡' },
            {
              name: 'one chicken',
              cList: [
                { name: '三级黄焖鸡3333', cList: [{ name: '四级黄焖鸡' }] }
              ]
            }
          ]
        },
        { name: '2222222222' },
        {
          name: '黄焖鸡米饭33333333',
          cList: [{ name: '二级黄焖鸡' }, { name: 'one chicken' }]
        }
      ]
    }
  },
  methods: {}
  
}
</script>

ok，可以看到，<my-trees />就是我们说的递归组件，当使用它时，只需要把上边我们定义好的数据通过props的方式传进去即可。

接下来，递归组件接收到了父组件传递的数据，就可以进行递归啦，我们来看下边的实现：

 

<template>
  <ul>
    <li v-for="(item,index) in list " :key="index">
      <p>{{item.name}}</p>
      <tree-menus :list="item.cList"></tree-menus>
    </li>
  </ul>
</template>

<script>
	export default{
		name:'treeMenus',
		props:{
			list: Array
		}
	}
</script>

效果如图，样式没加