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>