Vue独立组件开发-递归组件

文章目录

一、前言
二、实现
三、总结
四、最后

一、前言

递归组件就是指组件在模板中调用自己。

二、实现

开启递归组件的必要条件，就是在组件中设置一个 name 选项。

<template><div><my-component></my-component></div>
</template>
<script>
export default {name: 'my-component'
}
</script>

在 Webpack 中导入一个 Vue 组件，一般是通过 import myComponent from 'xxx' 这样的语法，然后在当前组件（页面）的 components: { myComponent } 里注册组件，这种组件是不强制设置 name 字段的，组件的名字都是使用者在 import 进来后自定义的。

但递归组件的使用者是组件自身，它得知道这个组件叫什么，因为没有用 components 注册，所以 name 字段就是必须的了。

除了递归组件用 name，有一些特殊的方法，比如通过遍历匹配组件的 name 选项来寻找组件实例，还有keep-alive组件也会使用组件的name属性。

不过，使用上面的组件是有问题的，如果直接运行，会抛出 max stack size exceeded 的错误，因为组件会无限递归下去，死循环。

要解决这个问题，就要给递归组件一个限制条件，一般会在递归组件上用 v-if 在某个地方设置为 false 来终结。比如我们给上面的示例加一个属性 count，当大于 5 时就不再递归：

<template><div><p>recursion</p><my-component :count="count + 1" v-if="count <= 5"></my-component></div>
</template>
<script>
export default {name: 'my-component',props: {count: {type: Number,default: 1}}
}
</script>

所以，实现一个递归组件的必要条件是：