小程式嵌套元件中孫子元件之間的傳值

之前做了無限嵌套的樹形結構的功能，其實就是自定義元件嵌套的原理，現在新增需求：點選樹圖的某項，顯示一個祖先元件中已經隐藏了的選項結構。

一開始想到了元件之間的傳值，做了之後發現問題來了，點選第一層級的元件也就是子元件是沒問題的，點孫子元件及其子代發現沒有任何效果，通過列印發現根本就沒有觸發祖先元件中綁定的事件。原來小程式是不支援跨元件傳值的，隻能一層一層的傳，子元件傳遞給父元件。比如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
    })
}