uni-app 子窗体使用$on无法给data赋值

uni-app 子窗体使用$on无法给data赋值

示例代码：

附件中

操作步骤：

附件中

预期结果：

正常改变

实际结果：

无法改变

bug描述：

定义全局子窗由于每个页面都会初始化子窗，导致每个页面都会注册$on监听，导致子窗无法更新data中的数据（如果是这样的是这个子窗真的很鸡肋啊完全没法用啊，只能做一个简单的模态框甚至都有问题）我已经在uni.$on之前调了uni.$off但还是无效。这也没法获取上个页面栈，完全没法用啊。

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win10
HBuilderX 正式
HBuilderX版本 3.2.11
手机系统 Android
手机系统版本 Android 11
手机厂商 华为
手机机型 红米k40
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 子窗体使用$on无法给data赋值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

大侠这个问题解决了吗？

更多关于uni-app 子窗体使用$on无法给data赋值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


作用域的问题，我最后把子窗体放在首页了

这个问题通常是由于全局事件监听在多个页面重复注册导致的。以下是解决方案：

  1. 在子窗体组件中使用唯一标识：
// 子窗体组件中
export default {
  data() {
    return {
      eventKey: 'customEvent_' + Date.now() + Math.random()
    }
  },
  mounted() {
    uni.$on(this.eventKey, this.handleEvent)
  },
  beforeDestroy() {
    uni.$off(this.eventKey, this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      // 处理数据赋值
      this.someData = data
    }
  }
}
  1. 使用页面栈管理事件：
// 在需要通信的页面
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const eventKey = `event_${currentPage.route}`

// 发送事件
uni.$emit(eventKey, data)

// 子窗体中监听特定页面的事件
uni.$on(eventKey, (data) => {
  this.targetData = data
})
  1. 使用Vuex状态管理替代事件通信：
// store中定义状态
state: {
  subWindowData: null
}

// 子窗体中watch监听store变化
watch: {
  '$store.state.subWindowData': function(newVal) {
    this.localData = newVal
  }
}
  1. 使用ref直接操作子窗体：
// 父页面中
<sub-window ref="subWin"></sub-window>

// 调用方法
this.$refs.subWin.updateData(data)

// 子窗体中定义方法
methods: {
  updateData(data) {
    this.targetData = data
  }
}
回到顶部