uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實戰(zhàn)
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
使用
案例使用看https://ask.dcloud.net.cn/article/36010
個人總結(jié)
uni. e m i t 、 u n i . emit、 uni. emit、uni.on 就像是子組件想傳參給父組件，從而調(diào)用父組件傳給子組件的方法進行傳參
官方總結(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)聽
總結(jié)
到此這篇關(guān)于uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實戰(zhàn)的文章就介紹到這了,更多相關(guān)uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了Javascript中的正則表達式的使用方式，非常的詳細，并附上簡單示例，這里推薦給大家。2015-03-03
JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法實例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法,結(jié)合實例形式詳細分析了javascript像素檢測碰撞算法的原理、實現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
往往我們需要在 JS 中動態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常?；旌鲜褂?。2008-11-11
event事件在本文以自定義的方式出現(xiàn)，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
把List集合轉(zhuǎn)成json格式傳到界面上，這樣js里面操作也簡單，具體的解決方法如下，大家可以參考學(xué)習(xí)下2014-04-04
最近有項目要實現(xiàn)N級菜單，首先從布局入手，即判斷是否有下級菜單，具體實現(xiàn)代碼，大家可以參考下本文2017-05-05
這篇文章主要介紹了一個模擬顯示桌面.scf程序的JS小函數(shù),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JS中==、===你分清楚了嗎,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
javascript 模擬坦克大戰(zhàn)游戲(html5版)附源碼下載
這篇文章主要介紹了javascript 模擬坦克大戰(zhàn)游戲關(guān)鍵點和遇到的問題及實現(xiàn)代碼,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)三角形粒子運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09