14.递归组件与动态组件

递归组件与动态组件

递归组件

递归组件就是指组件在模板中调用自己,开启递归组件的必要条件,就是在组件中设置一个 name 选项。比如下面的示例:




在 Webpack 中导入一个 Vue.js 组件,一般是通过 import myComponent from 'xxx' 这样的语法,然后在当前组件(页面)的 components: { myComponent } 里注册组件。这种组件是不强制设置 name 字段的,组件的名字都是使用者在 import 进来后自定义的,但递归组件的使用者是组件自身,它得知道这个组件叫什么,因为没有用 components 注册,所以 name 字段就是必须的了。除了递归组件用 name,我们在之前的小节也介绍过,用一些特殊的方法,通过遍历匹配组件的 name 选项来寻找组件实例。

不过呢,上面的示例是有问题的,如果直接运行,会抛出 max stack size exceeded 的错误,因为组件会无限递归下去,死循环。解决这个问题,就要给递归组件一个限制条件,一般会在递归组件上用 v-if 在某个地方设置为 false 来终结。比如我们给上面的示例加一个属性 count,当大于 5 时就不再递归:




所以,总结下来,实现一个递归组件的必要条件是:

  • 要给组件设置 name
  • 要有一个明确的结束条件

递归组件常用来开发具有未知层级关系的独立组件,在业务开发中很少使用。比如常见的有级联选择器和树形控件:

14.递归组件与动态组件_第1张图片
image

这类组件一般都是数据驱动型的,父级有一个字段 children,然后递归。下一节的实战,会开发一个树形控件 Tree。

动态组件

有的时候,我们希望根据一些条件,动态地切换某个组件,或动态地选择渲染某个组件。在之前小节介绍函数式组件 Functional Render 时,已经说过,它是一个没有上下文的函数,常用于程序化地在多个组件中选择一个。使用 Render 或 Functional Render 可以解决动态切换组件的需求,不过那是基于一个 JS 对象(Render 函数),而 Vue.js 提供了另外一个内置的组件 is 特性,可以更好地实现动态组件。

先来看一个 is 的基本示例,首先定义三个普通组件:













然后在父组件中导入这 3 个组件,并动态切换:




这里的 is 动态绑定的是一个组件对象(Object),它直接指向 a / b / c 三个组件中的一个。除了直接绑定一个 Object,还可以是一个 String,比如标签名、组件名。下面的这个组件,将原生的按钮 button 进行了封装,如果传入了 prop: to,那它会渲染为一个 标签,用于打开这个链接地址,如果没有传入 to,就当作普通 button 使用。来看下面的示例:





使用组件:




最终会渲染出一个原生的

你可能感兴趣的:(14.递归组件与动态组件)