vue 组件递归显示,递归组件中事件传值问题。

道法自然 / 2023-09-03 / 原文

1、比如下面的结构

[

   {

    id:1,

    text:'1',

    children:{

      id:2,

     text:'2',

  children:{

        id:3,

        text:'3'

        ......

     }

   }

]

可以看到,每个节点下面的children都是不一定的,有的可能会有很多层,有的可能只有一层。

那么这种情况下,我们就要用递归了。即组件(里面)自己调用自己,来形成不同的展示。

外层组件结构:

 组件里面自己调用自己:

 可以看到checkNode里面又引用了checkNode组件,唯一不同的是,传值是item.children

那么比如deleteNode是删除方法,直接回调父节的方法,来实现删除操作。

这样要注意,父级的组件中一定不能传参数,一定要由子组件传值,而且递归的组件中一定要绑定@delete-node方法

这样就可以顺利调用父类的方法,否则组件里的方法是调了,但不会去调用父方法了。