Vue面试题35：什么是递归组件？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

分析

• 递归组件我们用的比较少，但是在Tree、Menu这类组件中会被用到；

体验

• 组件通过组件名称引用它自己，这种情况就是递归组件

<template>
  <li>
    <div>{{model.name}}</div>
    <ul v-show="isOpen" v-if="isFolder">
      <!--注意这里：组件递归渲染了它自己-->
      <TreeItem 
        class="item" 
        v-for="model in model.children" 
        :model="model">
      </TreeItem>
    </ul>
  </li>
</template>
<script>
export default {
  name: 'TreeItem'
  //…
}
</script>

思路

• 1.下定义；
• 2.使用场景；
• 3.使用细节；
• 4.原理阐述；

回答范例

• 1.如果某个组件通过组件名称引用它自己，这种情况就是递归组件；

• 2.实际开发中类似Tree、Menu这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景；

• 3.使用递归组件时，由于我们并未也不能在组件内部导入它自己，所以需要设置组件name属性，用来查找组件定义，如果使用SFC，则可以通过SFC文件名推断。组件内部通常也要有递归结束条件，比如model.children 这样的判断；

• 4.查看生成的渲染函数可知，递归组件查找时会传递一个布尔值给resolveComponent，这样实际获取的组件就是当前组件本身；

• //范例
  //父组件
  <template>
    <h1>{{msg}}</h1>
    <Tree :model="model"></Tree>
  </template>
  
  <script setup>
  import { ref, reactive } from "vue"
  import Tree from '@/components/Tree.vue'
  const msg = ref("递归组件")
  const model = {
    label: "node-1",
    children: [
      { label: "node-1-1" },
      { label: "node-1-2" },
    ]
  }
  </script>
  //递归组件
  <template>
    <div>{{model.label}}</div>
    <Tree v-for="(item, index) in model.children" :key="index" :model="item"></Tree>
  </template>
  
  <script setup>
  import { ref, reactive } from "vue"
  defineProps({ model: Object })
  </script>