vue递归组件的增删改

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

置顶

不才

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

阅读量2.3k

点赞数

文章标签： vue 递归

本文链接：https://blog.youkuaiyun.com/weixin_45325262/article/details/95332234

版权

本文介绍如何在Vue中使用递归组件来渲染和管理树形数据结构，包括增、删、改等操作。

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

<template>
  <div id="app">
  	//引用组件，将数据动态传递给组件
    <Tree :list='list'/>
  </div>
</template>

export default {
    components:{
        Tree,//注册组件
    },
    data(){
        return {
        //递归组件的数据
            list:[{
                data:'数据1',
                open:true,
                id:1,
                children:[{
                  data:'数据1-1',
                  open:true,
                  id:2,
                  children:[{
                    data:'数据1-1-1',
                    open:true,
                    id:3,
                  }]
                },{
                  data:'数据1-2',
                  open:true,
                  id:4
                }]
            },{
                data:'数据2',
                open:true,
                id:5,
                children:[{
                  data:'数据2-1',
                  open:true,