uni-app中uni.$emit和uni.$on传值有问题

uni-app中uni.$emit和uni.$on传值有问题

开发环境 版本号 项目创建方式
Windows win10企业版 HBuilderX

产品分类：uniapp/H5

操作步骤：

一个页面通过uni.$emit传值并跳转页面，在新的页面中通过uni.$on监听，在回调函数中可以获取到值，uni.$on外获取不到

预期结果：

uni.$on监听的值在回调函数外也能获取到

实际结果：

uni.$on回调函数获取得到值，回调函数外获取不到

bug描述：

比如在index页面触发uni.$emit并跳转到home页面

//index.vue页面  
goPage(){  
    uni.$emit("home","home");  
    uni.navigateTo({  
        url:"/pages/home/home"  
    })  
}

在home页面uni.$on的回调函数可以拿到值，但是外面不行

//home.vue页面  
onLoad() {  
    uni.$on("home",(data)=>{  
        this.title=data;  
        console.log(this.title);//有值  
    });  
    setTimeout(_=>{  
        console.log(this.title);//无值  
    },1000);  
    console.log(this.title);//无值  
}

更多关于uni-app中uni.$emit和uni.$on传值有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

21 回复

先发事件再监听？ 跳转直接就能带过去的事情，还需要用什么事件

更多关于uni-app中uni.$emit和uni.$on传值有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


？？

有人解决吗

回复 风残落叶: ？？

回复 风残落叶: 这么才能解决啊

回复 刘林: 不懂，没人给解决

我也遇到了

快快

这个问题在H5和电脑端小程序才会出现，也困扰我挺久的。然后我直接放弃这种方法，直接传参过去

可以试一下，第一次跳转的时候是没有把值传过去的

vue没学好，跟uniapp无关

不然是什么问题？

我问下 如果我A有延迟，B直接获取当前，延迟执行后，怎么通知给B？

如果页面没有打开，将不能注册监听事件 uni.$on 和 uni.$once 。
如果需要给未打开的页面传参，使用url传参，或者使用vuex

同一个页面的组件传值，也是这样啊，改变不了值，也不会渲染

回复 嘟嘟丶嘟: 上传一下代码片段，如果你想题主一样的用法，那明显是错误的

回复 DCloud_UNI_HT: 好像是，我又试了一遍，它的值能改变了，就是第一次没有触发，如果在父组件中向子组件传值，用$emit,$on，应该在子组件的哪里去触发$on呢？？？

回复 嘟嘟丶嘟: 父组件像子组件传值 ，不要使用emit/on ， 使用 provide / inject 试一下

uni.$emit外面加个定时器延迟加载 不加定时器那边页面接收的到数据 但是页面渲染不到 延迟数大于或等于500毫秒 要不然会出现第一次加载无法获取数据问题

应该是只能在打开过的页面才能监听把，毕竟要注册监听器

在uni-app中，uni.$emit和uni.$on是基于事件总线的跨页面通信机制，需要注意以下几点：

  1. 事件监听和触发的执行顺序很重要。在您的情况下，uni.$emit在页面跳转前触发，而新页面的onLoad监听是异步的，可能导致外部代码先执行。

  2. 事件回调函数内部可以获取值是因为事件触发时回调被执行，而外部代码在监听设置时同步执行，此时还未收到事件。

解决方案：

  1. 推荐使用页面传参方式：
// index.vue
uni.navigateTo({
    url: '/pages/home/home?title=home'
})

// home.vue
onLoad(options) {
    this.title = options.title
}
  1. 如果必须使用事件总线，可以改为Promise方式：
// home.vue
data() {
    return {
        title: '',
        eventPromise: new Promise(resolve => {
            uni.$on('home', data => {
                this.title = data
                resolve()
            })
        })
    }
},
async onLoad() {
    await this.eventPromise
    console.log(this.title) // 现在可以获取到值
}
回到顶部