Vue递归组件

ゝ一纸荒年。 2022-08-30 04:15 191阅读 0赞

### Vue递归组件 ###

*  1、递归组件
 *  2、实例

# 1、递归组件 #

组件可以在自己的模板种递归调用自身，但这需要使用`name`选项为组件指定一个内部调用的名称。当调用`Vue.createApp({}).component({})`全局注册组件时，这个全局的ID会自动设置为该组件的`name`选项。  
  递归组件和程序语言中的递归函数调用一样，都需要有一个条件结束递归，否则就会导致无限循环。例如，可以通过v-if指令（表达式计算为假时）结束递归。

# 2、实例 #

下面看一个分类树状显示的例子，代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    	</head>
    	<body>
    		<div id="app">
    			<category-component :list="categories"></category-component>
    		</div>
    		
    	    <script src="https://unpkg.com/vue@next"></script>
            <script> const CategoryComponent = { name: 'catComp', props: { list: { type: Array } }, template: ` <ul>  <template v-if="list"> <li v-for="cat in list"> { {cat.name}} <catComp :list="cat.children"/> </li> </template> </ul> ` } const app = Vue.createApp({ data(){ return { categories: [ { name: '程序设计', children: [ { name: 'Java', children: [ { name: 'Java SE'}, { name: 'Java EE'} ] }, { name: 'C++' } ] }, { name: '前端框架', children: [ { name: 'Vue.js'}, { name: 'React'} ] }] } }, components: { CategoryComponent } }).mount('#app'); </script>
    	</body>
    </html>

渲染结果：  
![在这里插入图片描述][20210718222456852.png]

> 想想递归函数这个就很好理解了

[20210718222456852.png]: /images/20220829/b78f5c21a4494c61b5105b2fe15688ad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中递归组件实现多级列表

一、递归组件的概念 1. 递归组件：递归组件简单来说在组件内使用组件本身。这个在`vue`的项目开发中也是比较常见的。对于一些多级的数据嵌套，如果对于每一层数据都进行`

我就是我/ 2023年06月26日 12:28/ 0 赞/ 21 阅读

相关 vue实现递归组件

父组件 <loongDropDownBox :keyVal="keyVal" :menuData="menuData"></loongDropDownBox> 组件

怼烎@/ 2023年06月23日 02:52/ 0 赞/ 17 阅读

相关 vue递归组件

vu递归组件的实现：  <template> <div class="contain"> <ul>

深碍√TFBOYSˉ_/ 2023年01月19日 07:11/ 0 赞/ 198 阅读

相关 Vue 递归组件(构建树形菜单)

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的

阳光穿透心脏的1/2处/ 2023年01月02日 06:25/ 0 赞/ 228 阅读

相关 Vue 递归组件

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的

浅浅的花香味﹌/ 2022年12月27日 08:17/ 0 赞/ 191 阅读

相关递归组件2

父组件 <template> <div class="list-detail"> <list :list="list" class

港控/mmm°/ 2022年10月27日 00:29/ 0 赞/ 240 阅读

相关 vue 递归组件

子组件 <template> <ul class="tree"> <li v-for="(item,index) in tree

素颜马尾好姑娘i/ 2022年10月26日 14:18/ 0 赞/ 191 阅读

相关递归组件 vue 【关键：组件定义 name】

对于一些有规律的 dom 结构，我们可以通过递归方式来生成这个结构，，那么在 vue 的模板中，我们能不能递归生成dom,答案是肯定的，在 vue 的组件中能够调用自己本身。

ゝ一世哀愁。/ 2022年09月06日 10:24/ 0 赞/ 212 阅读

相关 Vue递归组件

Vue递归组件 1、递归组件 2、实例 1、递归组件组件可以在自己的模板种递归调用自身，但这需要使用`name`选项为组件指定一个内部调用的名称

ゝ一纸荒年。/ 2022年08月30日 04:15/ 0 赞/ 192 阅读

相关 Vue 实现递归组件的原理

这个是文件结构：可以create一个脚手架，来写，比较简单。 ![在这里插入图片描述][20190824195108634.png] 实现效果图： ![在这里插入图

不念不忘少年蓝@/ 2021年08月13日 20:07/ 0 赞/ 487 阅读