【Vue.js 3.0】递归组件实现思路

简介

1. 在 <script setup></script> 语法糖中，你不需要显式的注册组件名，Vue 会自动根据组件文件的文件名来推断组件名。
2. 当你在模板中使用 <RecursiveComponent> 标签时，Vue 会查找与当前组件文件相对应的组件定义。
3. 这意味着，如果你有一个名为 RecursiveComponent.vue 的文件，Vue 会自动将该文件名与模板中使用的 <RecursiveComponent> 标签对应起来。`

eg

以下是一个使用 <script setup></script> 语法糖的递归组件的完整示例：

ps:

在 Vue 3 中，RecursiveComponent 并不是 Vue 框架内置的一个特定组件，而是指你创建的一个组件，这个组件在其模板内部会递归地调用自己，从而实现无限嵌套或树形结构的渲染。

RecursiveComponent.vue

 <template>  
     <div v-if="items && items.length > 0">  
    	 <div v-for="(item, index) in items" :key="index">  
     	<div>{{ item.name }}</div>  
 		<!-- 递归调用自身来处理子节点 -->  
 		<RecursiveComponent v-if="item.children && item.children.length > 0" :items="item.children" />  
 	</div>  
 </div>  
 </template>  
<script setup>  
    import { defineProps } from 'vue';  
       const props = defineProps({  
          items: {  
              type: Array,  
              required: true
       	  },  
    });  
 </script> 

总结

1. 在这个例子中，RecursiveComponent 对应于当前的文件 RecursiveComponent.vue。
2. 当你在其他组件的模板中使用 <RecursiveComponent :items="someData" /> 时，Vue 会查找并渲染 RecursiveComponent.vue 中定义的组件。
3. 请确保你的项目配置正确，以便 <script setup></script> 语法糖能够正常工作。
4. 如果你使用的是 Vue CLI 创建的项目，确保 CLI 和相关依赖项已升级到支持 Vue 3 和 <script setup></script> 语法糖的版本。
5. 如果你使用的是 Vite 或其他现代前端构建工具，它们通常已经内置了对 Vue 3 和 <script setup></script> 的支持。

‘【Vue.js 3.0】基于Element-Plus 动态配置Menu 菜单栏’