HarmonyOS基礎之JS UI任意組件通訊

作者：陳喬 2021-09-14 09:34:05

組件間的通信主要作用是能在組件間傳遞數據或者執行相關的業務邏輯，對于鴻蒙應用組件，下面將對幾種組件間的通信方式進行代碼實現，其中包括實現自定義實現任意組件通信。

https://harmonyos.51cto.com

文件結構

首先我們準備好幾個組件 parent組件、current組件、child1組件、child2組件，其中parent與current是父子組件關系、curren與child1/child2是父子組件關系、child1與child2是兄弟組件關系、parent與child1/child2是跨層級組件的關系，詳細的代碼文件可以參考附件源碼，最終預覽得到結果如下：

HarmonyOS 基礎之JS UI任意組件通訊-鴻蒙HarmonyOS技術社區

父子關系通信

parent與current是父子組件關系，在current.js中props的title=''current-title"，在parent.hml中使用current組件時傳入title="parent"時，current組件顯示parent，這里使用了props由父組件向子組件傳遞title值進行通信，預覽結果見下圖：

curren與child1/child2是父子組件關系，在current組件中有三個按鈕改變parent、改變child1、改變child2，按鈕配置如下：

在curren組件中，點擊改變parent按鈕會觸發changeParent方法，點擊改變child1按鈕會觸發changeChild1方法，點擊改變child1按鈕會觸發changeChild1方法，這些方法會改變對應組件中的數據，如下：

點擊改變parent按鈕，通過使用$parent方法得到parent組件的實例，然后通過實例對象與parent組件進行數據通信:

點擊改變child1，通過使用$child方法得到child1組件的實例，然后通過實例對象與child1組件進行數據通信:

點擊改變child2，通過使用$child方法得到child2組件的實例，然后通過實例對象與child2組件進行數據通信:

在changeParent方法中使用this.$parent()方法來獲取了parent組件的ViewModel，從而可以訪問和改變parent組件的數據

在changeChild1和changeChild2中使用了this.$child(id)方法來獲取child1/child2組件的ViewModel，從而可以訪問和改變child1/child2組件的數據

除了使用this.$parent方法外還可以使用自定義事件的方式來進行子組件調用父組件方法來向父組件傳值，parent組件在引用current組件時綁定事件，在current組件中調用this.$emit方法來觸發綁定的自定義事件。

parent.hml中綁定自定義的eventEmit方法

current.js中使用this.$emit方法觸發eventEmit方法：

總結下來，父子組件間的通信方式大概有幾種方法：

props：用于父組件向子組件傳遞數據
$emit：用于自組件向父組件傳遞數據或調用父組件方法
$parent：用于獲取父組件ViewModel從而可以修改父組件數據和調用父組件方法
$child：用于獲取子組件ViewModel從而修改子組件數據和調用子組件方法

兄弟關系與跨層級組件間通信

根據上面父子組件的通信方式，對于兄弟組件和跨層級組件之間，可以組合使用上面的幾種方法組合的方式可以實現非父子組件間的通信，但是如果組件間嵌套比較復雜，嵌套層級比較多的情況下，使用以上方法組合的方式顯然不太方便，在這里嘗試實現一種類似vue bus全局通信的方式來進行任意組件間的通信。

在JS API中app.js文件中定義的數據可以通過this.app.app.def獲取，根據這個特性和使用觀察者模式來設計一可以全局訂閱響應的通信模式。

eventBus

首先我們定義evnetBus.js文件，在里面定義相關的訂閱、發布和取消訂閱的方法：

const Bus = { 
    // 發布的事件集合 
    $events:{}, 
  
    /** 
     * 發布事件方法 
     * type: string 字符串 
     * fun: function 綁定的方法 
     * */ 
    $on(type,fun){ 
  
    }, 
  
    /** 
     * 觸發事件方法 
     * type: string 發布事件的字符串 
     * args: 傳參 
     * */ 
    $emit(type,...args){ 
  
    }, 
  
    /** 
    * 注銷事件方法 
    * type: string 字符串 
    * fun: string|function 發布事件時返回的值或者發布的原function 
    * */ 
    $off(type,fun){ 
      
    } 
} 
export default Bus;

在里面我們定義了$events對象用于綁定事件的存放，$on方法用于綁定事件，$emit方法用于觸發事件，$off方法用于注銷事件，完整的eventBus.js如下：

eventBus.js

const Bus = { 
    // 發布的事件集合 
    $events:{ }, 
  
    /** 
     * 發布事件方法 
     * type: string 字符串 
     * fun: function 綁定的方法 
     * */ 
    $on(type,fun){ 
        let res = ""; 
        if(type && typeof type == "string" && fun &&　typeof fun　=="function"){ 
            let events = this.$events[type]; 
            if(events){ 
                let index = events.findIndex(null); 
                if(index > -1){ 
                    res = `${String(index)}${type}`; 
                    events[index] = fun; 
                }else{ 
                    events.push(fun); 
                } 
            }else{ 
                this.$events[type] = [fun]; 
                res = `0${type}`; 
            } 
  
        } 
        return res; 
    }, 
  
    /** 
     * 觸發事件方法 
     * type: string 發布事件的字符串 
     * args: 傳參 
     * */ 
    $emit(type,...args){ 
        if(type && typeof type == "string"){ 
            let events = this.$events[type]; 
            if(events){ 
                events.forEach(fun => { 
                    if(fun &&　typeof fun　=="function"){ 
                        fun(...args); 
                    } 
                }); 
            } 
        } 
    }, 
  
    /** 
     * 注銷事件方法 
     * type: string 字符串 
     * fun: string|function 發布事件時返回的值或者發布的原function 
     * */ 
    $off(type,fun){ 
        if(type && typeof type == "string" && fun){ 
            let events = this.$events[type]; 
            if(events){ 
                if(typeof fun == "string"){ 
                    let indexStr = fun.replace(type,''); 
                    let index = parseInt(indexStr); 
                    events[index] = null; 
                } 
                if(typeof fun == "function"){ 
                    events.forEach(item => { 
                        if(item == fun){ 
                            item = null; 
                        } 
                    }); 
                } 
            } 
        } 
    } 
} 
  
export default Bus;