uni-app 小红书小程序组件传值异常

uni-app 小红书小程序组件传值异常

产品分类

  • uniapp/小程序/小红书

PC开发环境操作系统

  • Windows

PC开发环境操作系统版本号

  • window10

HBuilderX类型

  • 正式

HBuilderX版本号

  • 4.87

第三方开发者工具版本号

  • 2.8.1

基础库版本号

  • 3.135.0

项目创建方式

  • HBuilderX

示例代码

<demoCb @change="changeCb" ref="demoCb"/>  

methods：{  
    changeCb (res) {  
      console.log('11111', res)  
    },  
}

<template>  
  <view>  
    dsadsad  
  </view>  
</template>  

<script>  
export default {  
  name: 'demo',  
  data () {  
    return {  
      name: '1'  
    }  
  },  
  mounted () {  
    this.$emit('change', '666')  
  }  
}  
</script>

操作步骤

  • 用如上代码就能复现

预期结果

  • 能正常接受子组件抛出的数据

实际结果

  • 目前子组件传递的数据不能接收到

bug描述

  • 子组件使用 $emit 向父组件传递数据，父组件拿不到数据是怎么回事，changeCb 并没有打印出数据出来，但是构建到微信小程序又是可以的。

更多关于uni-app 小红书小程序组件传值异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

该bug反馈内容基本完整，包含标题、详细描述、代码示例、复现步骤、预期与实际结果及分类信息。但可优化点：未说明是否尝试过调试或查看控制台错误日志，且代码示例中缺少组件注册方式等上下文，可能影响快速复现。
bug成立可能性高。代码符合Vue规范（正确使用$emit和@事件监听），且在微信小程序正常，说明非基础概念错误。问题聚焦于小红书小程序平台差异，结合知识库中平台差异说明，小红书作为独立支持平台，可能存在事件系统适配问题。知识库强调"注意数据和事件绑定的差异，组件使用时应按照vue的数据和事件绑定方式"，暗示部分小程序平台需特殊处理。
建议排查方向：1) 检查小红书平台是否对事件名（如"change"）有保留字限制；2) 确认是否在pages.json的globalStyle中配置了usingComponents；3) 尝试改用其他事件名（如"update"）测试。同时推荐升级至最新HBuilderX版本（当前4.87接近最新版），因旧版本可能存在平台适配缺陷。参考Vue组件通信文档验证代码结构是否符合规范。 内容为 AI 生成，仅供参考

更多关于uni-app 小红书小程序组件传值异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


应该是小红书组件加载的问题 改为异步执行就可以拿到数据了 mounted() {
setTimeout(() => {
this.$emit(‘change’, ‘666’)
})
},

之前的版本是好的吗？

已解决，目前发现是某个第三方库的影响，我把代码注释了之后就可以了。 import RumLogger from ‘@arms/rum-miniapp’ 引入的是这个，不引入就一切正常，很奇怪

但是不注释，在微信小程序下又是正常的

回复 1***@qq.com: 估计是影响了小红书的运行时代码，没有影响微信的

根据你提供的信息，这个问题是小红书小程序平台特有的兼容性问题。

在uni-app中，子组件通过$emit触发父组件监听的事件是标准用法，你的代码在微信小程序正常，但在小红书小程序异常，这通常是小程序平台底层差异导致的。

主要原因： 小红书小程序的自定义组件事件机制可能与微信小程序存在差异，导致$emit触发的事件无法正常冒泡到父组件。

解决方案：

  1. 使用ref直接调用方法（推荐） 在父组件中通过ref直接调用子组件的方法：

    <!-- 父组件 -->
<demoCb ref="demoCb"/>  

<script>
export default {
  mounted() {
    // 直接调用子组件方法
    this.$refs.demoCb.someMethod()
  }
}
</script>

    <!-- 子组件 -->
<script>
export default {
  methods: {
    someMethod() {
      // 处理逻辑
      this.$emit('change', '666')
    }
  }
}
</script>

  2. 使用全局事件总线 如果组件层级较深，可以使用全局事件通信：

    // 在子组件中触发事件
uni.$emit('custom-event', { data: '666' })

// 在父组件中监听
uni.$on('custom-event', (res) => {
  console.log('接收数据:', res)
})

// 记得在组件销毁时移除监听
uni.$off('custom-event')
回到顶部