使用uni.$emit觸發(fā)事件后,對(duì)應(yīng)的uni.$on就會(huì)監(jiān)聽到事件觸發(fā),在回調(diào)中去執(zhí)行相關(guān)的邏輯,下面這篇文章主要給大家介紹了關(guān)于uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實(shí)戰(zhàn)的相關(guān)資料,需要的朋友可以參考下

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

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

那要實(shí)現(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 
			});
        },
    },
}

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

但是但是但是（重點(diǎn)?。。∏煤诎澹?/p>

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 頁面同時(shí)都調(diào)用了 C頁面并且使用了uni.$on 并且名字是一樣的

C頁面返回是方法使用了 uni.$on 同時(shí)也使用了 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ù)渲染混亂這個(gè)時(shí)候把名字改成對(duì)應(yīng)的就好了

補(bǔ)充知識(shí)：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

使用

案例使用看https://ask.dcloud.net.cn/article/36010

個(gè)人總結(jié)

uni. e m i t 、 u n i . emit、 uni. emit、uni.on 就像是子組件想傳參給父組件，從而調(diào)用父組件傳給子組件的方法進(jìn)行傳參

官方總結(jié)

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

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

總結(jié)

到此這篇關(guān)于uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: