vue---实现递归组件(多级下拉菜单)

概念：
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

之前在写组件时总有些疑惑，为什么export default导出的对象中有个name属性，今天看过递归组件之后，才发现这个name属性的一个比较重要的作用。（当然。name属性的还有其他的用处）。

 

组件递归:
	1、设置组件name名称
	
	2、在模板中直接使用
		<名称 />
		xx-Yy的名称要写成
	
	3、使用时传入参数的方式和组件在其他组件中使用相同,注意递归终止条件
		  倘若组件需要传参数

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

数据结构：

      list: [
        {
          title: "成人票",
          children: [
            {
              title: "成人三馆联票",
              children: [
                {
                  title: "嘉华酒店自助晚餐",
                  children: [
                    {
                      title: "嘉华酒店自助晚餐-武汉分店",
                    },
                  ],
                },
                {
                  title: "文华酒店自助晚餐",
                },
                {
                  title: "君越酒店自助晚餐",
                },
              ],
            },
            {
              title: "成人五馆联票",
            },
            {
              title: "成人五馆联票 + 酒店",
            },
          ],
        },
        {
          title: "学生票",
          children: [
            {
              title: "古井酒店自助晚餐",
            },
            {
              title: "维斯汀酒店自助晚餐",
            },
            {
              title: "诺富特嘉华酒店自助晚餐",
            },
            {
              title: "全季酒店自助晚餐",
            },
          ],
        },
        {
          title: "儿童票",
        },
        {
          title: "特惠票",
        },
      ],

递归组件:

总结：
通过props从父组件拿到数据，递归组件每次进行递归的时候都会detail-list组件传递下一级children数据，（大家可以想象一下整个过程），整个过程结束之后，递归也就完成了，当然，这段代码只是简单的做了下递归组件的使用。对于折叠树状菜单来说，我们一般只会去渲染一级的数据，当点击一级菜单时，再去渲染一级菜单下的结构，如此往复。那么v-if就可以实现我们的这个需求，当v-if设置为false时，递归组件将不会再进行渲染，设置为true时，继续渲染 

多级下拉菜单

最后也为大家准备了一个树状折叠菜单的递归组件实现方式~~