小程序嵌套组件中孙子组件之间的传值

之前做了无限嵌套的树形结构的功能，其实就是自定义组件嵌套的原理，现在新增需求：点击树图的某项，显示一个祖先组件中已经隐藏了的选项结构。

一开始想到了组件之间的传值，做了之后发现问题来了，点击第一层级的组件也就是子组件是没问题的，点孙子组件及其子代发现没有任何效果，通过打印发现根本就没有触发祖先组件中绑定的事件。原来小程序是不支持跨组件传值的，只能一层一层的传，子组件传递给父组件。比如A是引用嵌套组件的页面，即祖先组件，B是子组件，C是孙子组件......，A->B->C，点击B组件是可以触发A组件绑定的事件的，但是点击C组件只能触发B组件中绑定的事件，没办法直接去触发A中的事件。

解决方法：组件中监听自己发出的事件，一层一层的往上传递。

但是有个问题，就是数据量很大的时候，因为涉及到递归传递，性能会很差。在社区请教的时候，有大佬也是用的递归的方法，也是一样的问题，数据量大的时候性能差，目前没找到其他方法....不过对大多数情况是OK的

递归组件tree.wxml：

<view>
    <view bindtap='select_add'>xxx</view>
    <view class='ul' wx:if='{{item.children && item.children.length>0}}'>
        <tree treedata='{{item.children}}' bindmyevent='getMask'></tree>
    </view>
</view>

递归组件tree.js

Component({
    properties:{
        treedata:{
            type:Array
        }
    },
    data:{
        mask:true
    },
    methods:{
        select_add(){
            this.data.mask=false;
            let mask=this.data.mask;
            this.triggerEvent('myevent',{ mask })
        },
        
        getMask(e){
            console.log(e);
            let mask=e.detail.mask;
            this.triggerEvent('myevent',{ mask })
        }
    }
})

父组件wxml：

<tree treedata='{{treedata}}' bind:myevent='getMask'></tree>

父组件js中接收传递过来的参数，就可以做相关的操作了

getMask(e){
    console.log(e);
    // 接收传递过来的参数做相关操作
    this.setData({
        mask:e.detail.mask
    })
}