vue组件的自调用（递归调用）

最新推荐文章于 2025-03-25 08:00:00 发布

css_666

最新推荐文章于 2025-03-25 08:00:00 发布

阅读量5.5k

点赞数 1

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/css_666/article/details/104832314

版权

vue.js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue中封装一个可处理不确定层级的树形组件，通过递归调用实现复杂数据结构的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：封装一个树形组件，数据结构如下所示，但是层级不确定。

treeData:[
        {text:1,children:[
          {text:2,children:[{text:5},{text:'55'}]},
          {text:3},
          {text:4},
        ]}
      ]

因为层级不确定，那么就存在组件递归调用的可能。通常我们在封装vue组件时会有一个name的属性，它就是用来进行递归调用的。

<template>
  
  <ul class="tree">
    <li v-for="(item,index) in treedata" :key="index">
      <div class="ui-draggable ui-draggable-handle ui-droppable">
        {{item.text}}
      </div>
      <my-tree v-if="item.children && item.children.length>0" :treedata="item.children"></my-tree>
    </li>
  </ul>
</template>

<script>

export default {
  name: "myTree",
  props:{
    treedata:{
      default:function(){
        return []
      }
    }
  },
}

这样我们在使用这个组件的时候只需要进行传递数据即可。