uni-app 【报Bug】uni.$on在抖音小程序祖先组件传子组件接收不到参数，在子组件能给祖先组件传参

uni-app 【报Bug】uni.$on在抖音小程序祖先组件传子组件接收不到参数，在子组件能给祖先组件传参

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX

产品分类：uniapp/小程序/抖音

示例代码：

mounted() {
    this.getProductInfo()//获取完成传参
    let that = this;
    uni.$on("windowClose", (res) => {  
        that.windowclose(res)  
    })  
},
//获取商品详情
async getProductInfo() {
    try {
        const result = await this.$API.goods.getProductInfo(this.id);
        if (result.status === 200) {  
            uni.$emit("skuListArray",result.data)  
            this.skuList = result.data.productValue  
            this.storeInfo = result.data.storeInfo;  
            this.contaniner = result.data.storeInfo.description;  
            this.firstSuk = result.data.productValue[0].suk;  
        } else {  
            uni.showToast({  
                title: "该商品不存在",  
                duration: 2000,  
            });  
            uni.switchTab({  
                url: "/pages/index/index",  
                fail(e) {  
                    console.log(e)  
                }  
            })  
        }  
    } catch (e) {  
        //TODO handle the exception  
    }  
},
//子组件
mounted () {
    let that = this;  
    uni.$on("skuListArray", function(res){  
        console.log(res,"接受到了")  
    })  
    uni.$on("activeIndex",(index)=>{  
        that.optSku(index)  
    })  
},
//更新
updata(res) {
    console.log(res,'aaa')
    this.skuList = res.productValue;
    this.shopname = res.storeInfo.store_name;
    this.isgoods = res.storeInfo.is_goods;
}

操作步骤：

在当前页面用uni-popup包裹一个自定义组件，然后用uni.$emit传参给子组件

预期结果：

子组件应该接收到了参数并且打印

实际结果：

没有触发事件监听，但是在子组件里就能触发并给祖先组件传参

bug描述：

在祖先组件里获取商品详情，然后把数据传给子组件，子组件在mounted里面接收，但是没有传过去，但是子组件挂载的可以传递给祖先组件


更多关于uni-app 【报Bug】uni.$on在抖音小程序祖先组件传子组件接收不到参数，在子组件能给祖先组件传参的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 【报Bug】uni.$on在抖音小程序祖先组件传子组件接收不到参数，在子组件能给祖先组件传参的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的uni-app事件总线在抖音小程序中的生命周期时序问题。

核心原因： 在抖音小程序中，祖先组件的mounted执行时，子组件的mounted可能尚未执行完成，导致uni.$emit触发时子组件的uni.$on监听器还未注册。

解决方案：

  1. 使用nextTick延迟触发事件（推荐）：
async getProductInfo() {
    try {
        const result = await this.$API.goods.getProductInfo(this.id);
        if (result.status === 200) {
            this.$nextTick(() => {
                uni.$emit("skuListArray", result.data);
            });
            // ...其他代码
        }
    } catch (e) {}
}
  1. 在子组件中使用created替代mounted：
// 子组件
created() {
    uni.$on("skuListArray", (res) => {
        console.log(res, "接受到了");
        this.updata(res);
    });
}
回到顶部