uni.$emit、un.$on实现跳转指定页面后提示用户保存成功
时间: 2024-09-30 07:04:24 浏览: 33
uni.$emit 和 uni.$on 是 UniApp 开发框架中的事件总线机制,用于组件之间的通信。当你需要在一个组件完成操作后通知另一个组件时,可以使用这两个方法。
`uni.$emit` 用于触发一个自定义事件并传递数据。例如,在提交表单并且验证通过后,你可能会在“保存”按钮的点击事件处理器中发出这个事件:
```javascript
this.$emit('saveSuccess', { message: '数据已保存' });
```
这会告诉所有监听 `saveSuccess` 事件的组件,保存操作已经完成,并且附带了 "数据已保存" 的消息。
`uni.$on` 则用于注册事件监听器,接收事件数据。在目标组件(比如弹窗或确认框),你需要设置监听事件,然后处理接收到的数据,例如显示提示信息:
```javascript
// 弹出层组件
export default {
methods: {
showAlert() {
this.$on('saveSuccess', (data) => {
this.showSaveSuccessMessage(data.message);
});
},
},
mounted() {
this.showAlert();
},
}
// 跳转页面组件
methods: {
handleSaveButtonClick() {
// ...保存操作...
this.$emit('saveSuccess'); // 触发事件
this.$router.replace('/successPage'); // 跳转到新页
},
}
```
当保存操作成功后,`handleSaveButtonClick` 会发出 `saveSuccess` 事件,然后在 `showAlert` 中接收到这个事件并在适当的时候显示保存成功的提示。
阅读全文