10.什么是递归插槽及使用方式

Posted 2022-08-16 @大迁世界

这节课，我们来看下什么是递归插槽。

首先，我们先来看下什么是递归组组件，假设，我们有一个 VFor 组件，它的内容如下：

 VFor.vue
<template>
  <div>
    
   list[0] 
    <v-for v-if="list.length > 1" :list="list.slice(1)" />
  </div>
</template>
<script>
export default 
  name: \'VFor\',
  props: 
    list: Array,
  ,

</script>

当 VFor 组件挂载时，我们渲染 list[0] 元素，接着，判断 list 长度是否大于 1，如果大于 1 ，则继续调用 vFor 自身组件，然后使用 list.slice(1)" 排除当前第 0 个元素，这样递归下去，直至 list.length > 1 不成立。

注意：大家可能对递归组件 不熟悉，一般用递归组件需要给个 name，也就是组件名称，然后在 模板中直接使用该 name 就是调用自身。

当然，也可以省略 name 属性，不过你文件名要跟内部使用的 组件名称一样。