uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on怎么使用

這篇文章主要介紹“uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on怎么使用”，在日常操作中，相信很多人在uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

uni.$emit 和 uni.$on 是uniapp自帶的跨頁面?zhèn)髦?nbsp;  

vue 父子通訊可以用 props  this.$emit   這種簡單的父子通訊緊適用于 頁面和組件 或者 組件之間的傳值，他并不適用于頁面和頁面的互相傳值

那要實現(xiàn)頁面通訊呢，我們一起來看看uni.$emit 和 uni.$on的使用方法

示例：

        A頁面在 onload 中使用   uni.$on('自定義名稱',function(data){}   接收   data為接收到的值

        B頁面在事件中  使用    uni.$emit('自定義名稱',{屬性名稱 : 屬性值}) 并搭配使用 uni.navigateBack 跳回A頁面     A頁面的自定義名稱要和B頁面的自定義名稱相同

代碼：

        A    頁面

//  A  頁面
export default {
    data(){
        return{
 
        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  為 B 頁面?zhèn)鬟^來的值
        )}
    },
}

        B   頁面

//  B  頁面
 
export default {
    data(){
        return{
            listData：[1,2,3,4,5]
        };
    },
    methods:{
        jump(){
            uni.$emit('add',{listData:this.listData})
            uni.navigateBack({
	            delta: 1 
			});
        },
    },
}

這樣就實現(xiàn)的頁面和頁面之間的通訊    

但是  但是  但是 （重點?。?！敲黑板）

 uni.$emit 和 uni.$on 都屬于全局跨頁面?zhèn)鲄?/p>

所以在A頁面  在 onUnload 周期 添加移除監(jiān)聽事件

  uni.$off('自定義名稱');

//  A  頁面
 
export default {
    data(){
        return{
 
        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  為 B 頁面?zhèn)鬟^來的值
        )}
    },
    onUnload() {  
      // 移除監(jiān)聽事件  
         uni.$off('add');  
	},
}

以上就解決了uniapp 跨頁面?zhèn)鲄?/p>

使用uni.$emit 和 uni.$on 遇到的大坑

A頁面 和 B 頁面同時都 調(diào)用了 C頁面 并且使用了uni.$on 并且名字是一樣的

C頁面 返回是方法  使用了  uni.$on 同時也使用了 uni.navigateBack 

A頁面代碼   

//  A  頁面
 
export default {
    data(){
        return{
 
        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  為 C 頁面?zhèn)鬟^來的值
        )}
    },
    onUnload() {  
      // 移除監(jiān)聽事件  
         uni.$off('add');  
	},
    methods：{
        //  A 頁面 跳轉(zhuǎn)B頁面 
        jumpB(){
             uni.navigateTo({
		        url:'B'
		     })
        },
        //   A 頁面 跳轉(zhuǎn)C頁面
        jumpC(){
             uni.navigateTo({
		        url:'C'
		     })
        },
    }，
}

B頁面代碼

//  B  頁面
 
export default {
    data(){
        return{
 
        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  為 C 頁面?zhèn)鬟^來的值
        )}
    },
    onUnload() {  
      // 移除監(jiān)聽事件  
         uni.$off('add');  
	},
    methods：{
        //   B 頁面 跳轉(zhuǎn)C頁面
        jumpC(){
             uni.navigateTo({
		        url:'C'
		     })
        },
    }，
}

C 頁面

//  C 頁面
 
export default {
    data(){
        return{
            listData：[1,2,3,4,5]
        };
    },
    methods:{
        jump(){
            uni.$emit('add',{listData:this.listData})
            uni.navigateBack({
	            delta: 1 
			});
        },
    },
}

當(dāng)A頁面跳B頁面   B頁面跳到C頁面          在A頁面跳轉(zhuǎn)到B頁面然后B頁面跳轉(zhuǎn)到C頁面  C頁面修改完數(shù)據(jù)之后 AB頁面的值都發(fā)生了改變

解決方法：AB頁面的名稱都一樣   所以數(shù)據(jù)渲染混亂   這個時候把名字改成對應(yīng)的就好了

補充知識：uni.$emit、 uni.$on 、 uni.$once 、uni.$off的使用

介紹

看官方文檔https://uniapp.dcloud.io/collocation/frame/communication?id=emit

或者直接在uni-app官方網(wǎng)站直接搜uni. e m i t 、 u n i . emit、 uni. emit、uni.on 、 uni. o n c e 、 u n i . once 、uni. once、uni.off

使用

官方總結(jié)

uni. emit 、 uni.emit、 uni. emit、uni.on 、 uni. once 、 uni . once 、uni. once、uni.off 觸發(fā)的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等

使用時，注意及時銷毀事件監(jiān)聽，比如，頁面 onLoad 里邊 uni. on注 冊 監(jiān) 聽 ， onUnload 里 邊uni . on注冊監(jiān)聽，onUnload 里邊 uni. on注冊監(jiān)聽，onUnload里邊uni.off 移除，或者一次性的事件，直接使用 uni.$once 監(jiān)聽

到此，關(guān)于“uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>