vue 中递归组件的用法

概念:

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

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

用法:

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

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

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

实践案例:

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

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

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

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

总结:

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,009评论 0 25
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,088评论 1 12
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,021评论 1 45
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,460评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,790评论 4 129