uni-ui的抽屉组件关闭后怎么触发页面刷新

Top丶俊蓓提问于 2026-02-10 23:36:28 阅读 14

移动

在uni-app里用uni-drawer抽屉组件，修改数据后关闭抽屉，页面数据没更新。之前试过在关闭事件里用uni.$emit(‘refresh’)，页面监听了这个事件但没反应，控制台也没报错，求问正确的触发方式是怎样的？

抽屉组件代码这样写的：

<uni-drawer :visible="showDrawer" @close="handleClose">
  <!-- 表单内容 -->
  <button @click="saveData">保存</button>
</uni-drawer>

保存方法执行后直接关闭抽屉：

saveData() {
  // 提交数据成功后
  this.showDrawer = false
  uni.$emit('refresh')
}

页面监听部分：

onLoad() {
  uni.$on('refresh', () => {
    console.log('收到刷新指令') // 这个日志没打印
    this.loadData()
  })
}

uni-app uni-ui

我来解答赞 2 收藏

反馈

1 条解答

彦霞 Lv1

这个问题主要是因为 uni.$on 在页面的 onLoad 里监听，但事件可能在监听页面还没注册完成时就触发了。而且 uni.$emit 和 uni.$on 跨组件通信容易有生命周期对不上的问题。

常见的解决方案是用回调函数或者直接通过父组件控制。最稳的做法是在关闭抽屉的时候直接调用刷新方法，而不是发事件。

你可以在抽屉关闭的 handleClose 里处理数据更新：

handleClose() {

  this.showDrawer = false

  // 直接调用页面的数据加载方法

  this.loadData()

}

然后把 saveData 改成保存完主动关闭并触发刷新：

saveData() {

  // 提交数据逻辑

  api.updateData(this.formData).then(res => {

    // 保存成功后关闭抽屉并刷新

    this.showDrawer = false

    // 注意这里不能依赖 this.loadData，除非它在当前组件

    // 更推荐的方式是通知父组件刷新

  })

}

如果你的抽屉是子组件，父组件可以这样传方法进去：

<uni-drawer :visible="showDrawer" @close="loadData">

  <drawer-content @save="handleSave" />

</uni-drawer>

handleSave 里执行保存后再关闭：

handleSave() {

  // 保存逻辑

  this.loadData() // 刷新数据

  this.showDrawer = false

}

总之别用 uni.$emit/$on 做这种强依赖的刷新，容易丢事件。直接函数调用最靠谱。

2026-02-11 00:01