vue嵌套组件传参

vue父子组件参数传递

我们一般使用prop给子组件传递参数，在子组件中使用$emit触发父组件中监听的事件，并且可以附带参数。

比如我们封装了一个名为 NestedDir 的子组件(嵌套目录的意思)，内容如下(用到了element ui组件)：

可以看出这个 NestedDir 接收父级传来的 nested 数组类型的数据，并且它的内部点击 新增目录、新增文件，可以触发 父级 监听的 change 事件。比较特殊的是这个组件中调用了自己：

因为我们会传递给它的 nested 数据结构大概是下面的样子：

[{
    "id": 1,
    "name": "目录1",
    "type": "dir",
    "children": [{
        "id": 2,
        "name": "目录3",
        "type": "dir",
        "children": [],
        "pid": 1
    }, {
        "id": 3,
        "name": "文件2",
        "type": "file",
        "pid": 1
    }]
}, {
    "id": 4,
    "name": "目录2",
    "type": "dir",
    "children": []
}, {
    "id": 5,
    "name": "文件1",
    "type": "file",
    "children": []
}]

父组件中调用：

渲染出的页面是下面的样子：

深层递归组件事件丢失

这样我们构造出了一个理论上可以无限嵌套的目录结构，但是经过测试发现 在二级目录上的新增按钮点击是没有任何反应的，原因是我们在 NestedDir 中调用了它自己导致事件丢失，因为它无法触发父级的父级的监听事件。

todo 如何解决？

$attrs

$listeners