uniapp 在当前tabbar页面操作更新另一个tabbar页面的数据
时间: 2024-11-22 09:44:22 浏览: 0
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
3星 · 编辑精心推荐
UniApp 提供了一种称为“Page间通信”(也称作父子组件间的通信)的功能,可以实现在一个 TabBar 页面的操作影响到其他 TabBar 页面的数据。具体可以通过以下几种方式:
1. **Vuex**: 如果两个 TabBar 页面都共享同一个 Vuex store,那么可以在第一个页面修改状态后,通过 actions 和 mutations 更新状态,然后在其他依赖该状态的组件中获取到变化。
```javascript
// 页面 A 中的操作
store.dispatch('updateData', newValue);
// vuex/store.js
mutations: {
UPDATE_DATA(state, value) {
state.data = value;
}
}
```
在页面 B 中监听数据变化:
```javascript
computed: {
data() {
return this.$store.state.data;
}
}
```
2. **事件总线(Event Bus)**: 创建一个全局事件总线,在第一个页面触发事件,其他页面订阅这个事件处理更新。
```javascript
// 页面 A 触发事件
uni.$emit('dataUpdated', newValue);
// 全局事件总线
const eventBus = new Vue();
eventBus.$on('dataUpdated', (value) => {
// 页面 B 或其他依赖此事件的地方更新数据
});
```
3. **路由传参和导航守卫**: 可以在路由跳转时将数据作为参数传递,或者在进入新页面时设置状态。
```javascript
// 页面 A 跳转到页面 B 并携带数据
this.$router.push({
name: 'pageB',
params: { newData: newValue }
});
// 页面 B 获取参数
export default {
computed: {
newData() {
return this.$route.params.newData;
}
}
};
```
阅读全文