微信小程序Wepy框架的三個事件交互($broadcast,$emit,$invoke)


$broadcast:

$broadcast事件是由父組件發起,所有子組件都會收到此廣播事件,除非事件被手動取消。事件廣播的順序為廣度優先搜索順序,如上圖,如果頁面Page_Index發起一個$broadcast事件,那么按先后順序依次接收到該事件的組件為:ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下圖

 
 

理解官方意思就是:如果通過當前組件進行$broadcast廣播事件,那么就只有它的子組件能接收事件,它的父組件和兄弟組件是無法接收到消息。調用方式如下

        this.$broadcast('eventName', param1,param2,param3,......)

        然后在子組件的events里面定義eventName接收事件就行了,如下:

        events = {

            'eventName': (param1,param2......., $event:Event) => {

                }

        }

$emit

 $emit與$broadcast正好相反,事件發起組件的所有祖先組件會依次接收到$emit事件。如果組件ComE發起一個   $emit事件,那么接收到事件的先后順序為:組件ComA、頁面Page_Index。如下圖:

 

 
 

理解官方的意思就是:如果通過當前組件進行$emit廣播事件,那么就只有它的父組件能接收事件,它的子組件和兄弟組件是無法接收到消息。調用方式如下

        this.$emit('eventName', param1,param2,param3,......)

        然后在父組件的events里面定義eventName接收事件就行了,如下:

        events = {

            'eventName': (param1,param2......., $event:Event) => {

                }

        }

$invoke

$invoke是一個頁面或組件對另一個組件中的方法的直接調用,通過傳入組件路徑找到相應的組件,然后再調用其方法。

比如,想在頁面Page_Index中調用組件ComA的某個方法:

this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在組件ComA中調用組件ComG的某個方法:

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

理解官方的意思就是:如果通過當前組件進行$invoke觸發事件,如果父組件已經在components里面引入了子組件就可以直接通過invoke來單獨向子組件發送事件;如果是子組件之間的事件交互,第一個參數就需要對應組件的路徑。調用方式如下

父組件向子組件發送事件:

    this.$invoke('子組件,必須要單引號括起來', '子組件方法名稱',  param1,param2,param3.......);

子組件間發送事件:

this.$invoke('子組件的相對路徑', '子組件方法名稱',  param1,param2,param3.......);



作者:會擼碼的小馬
鏈接:https://www.jianshu.com/p/3aeca9db1e51
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM