vue递归组件的用法

概念：

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

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

用法：

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

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

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

实践案例：

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


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

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

注意本文开头所说，name属性的使用（你可以把它当作从import导入了一个组件并注册，我们在temlpate可以使用使用子组件自身进行递归了）

总结：

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