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

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

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

示例：

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

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

代碼：

        A    頁(yè)面

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

        B   頁(yè)面

//  B  頁(yè)面
 
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)的頁(yè)面和頁(yè)面之間的通訊    

但是  但是  但是 （重點(diǎn)?。?！敲黑板）

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

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

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

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

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

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

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

C頁(yè)面 返回是方法  使用了  uni.$on 同時(shí)也使用了 uni.navigateBack 

A頁(yè)面代碼   

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

B頁(yè)面代碼

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

C 頁(yè)面

//  C 頁(yè)面
 
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頁(yè)面跳B(niǎo)頁(yè)面   B頁(yè)面跳到C頁(yè)面          在A頁(yè)面跳轉(zhuǎn)到B頁(yè)面然后B頁(yè)面跳轉(zhuǎn)到C頁(yè)面  C頁(yè)面修改完數(shù)據(jù)之后 AB頁(yè)面的值都發(fā)生了改變

解決方法：AB頁(yè)面的名稱都一樣   所以數(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í)別的，跨任意組件，頁(yè)面，nvue，vue 等

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

總結(jié)

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

最新評(píng)論