vue 中递归组件的用法_@jie

概念：

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

使用vue框架，我们会发现export default 导出的对象中有一个name属性，这
个name属性是一个比较重要的属性，而且属性好处不止这一处。

用法：

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

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

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

实践案例：

首先创建一个tree-father组件，这个组件作为使用递归组件的父组件

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

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

记住本文开头说的，那么属性的使用很重要，(你可把它当做从import导入了一个组件并注册，我们在template可以使用使用子组件自身进行递归）

总结：

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