uniapp在app模式下组件传值

在 UniApp 编译成 App 后，传递参数可以通过多种方式实现，常见的方式有以下几种：

1. 通过 URL 参数传递（适用于 WebView）

• 如果你的 App 页面通过 WebView 渲染，可以像在 Web 端一样通过 URL 传递参数。例如：

  uni.navigateTo({
    url: '/pages/targetPage/targetPage?param=value'
  });
  

• 目标页面可以通过 onLoad 获取参数：

  onLoad(options) {
    console.log(options.param); // 获取 URL 中的 param 参数
  }
  

2. 通过 Vuex 全局状态管理

• 在 Vue 3 中，可以利用 Vuex 进行全局状态管理，传递全局参数。例如：

  // 在组件中设置 Vuex 状态
  this.$store.commit('setUser', userInfo);
  

  在 Vuex 中定义 mutation：

  const store = createStore({
    state: {
      user: null,
    },
    mutations: {
      setUser(state, userInfo) {
        state.user = userInfo;
      },
    },
  });
  

  其他页面可以通过 this.$store.state.user 获取到全局状态。

3. 通过全局变量（例如 globalData）传递参数

• UniApp 提供了 getApp() 来访问全局的数据。可以在全局 App 实例中设置数据，然后在页面中获取。

  // 在 App.vue 中设置全局数据
  App({
    globalData: {
      userInfo: null
    }
  });
  

  在页面中获取全局数据：

  const app = getApp();
  console.log(app.globalData.userInfo);
  

4. 通过 Storage 本地存储传递参数

• 使用 uni.setStorageSync 和 uni.getStorageSync 存储参数，能够在不同页面间传递数据。

  // 设置存储
  uni.setStorageSync('userInfo', userInfo);
  

  在目标页面获取数据：

  const userInfo = uni.getStorageSync('userInfo');
  console.log(userInfo);
  

5. 通过事件总线传递参数

• 如果你希望在不同页面或组件之间传递数据，而不依赖于存储或 Vuex，可以使用事件总线进行通信。
• 创建一个全局的事件总线：

  // eventBus.js
  export const eventBus = new Vue();
  

• 在一个组件中发出事件：

  eventBus.$emit('userUpdated', userInfo);
  

• 在目标页面或组件中监听事件：

  eventBus.$on('userUpdated', (data) => {
    console.log(data); // 获取传递的数据
  });
  

6. 通过参数直接传递（适用于组件）

• 如果你是在不同的组件之间传递数据，可以直接通过 props 传递参数：

  // 父组件
  <child-component :userInfo="userInfo"></child-component>
  

  // 子组件
  props: {
    userInfo: Object
  }
  

7. 通过原生 API 传递参数

• 对于原生功能，可以通过 UniApp 提供的原生 API 进行通信。例如，通过 uni.setNativeStorage 和 uni.getNativeStorage 进行原生数据存储和获取。

总结：在 UniApp 中，传参方式的选择依赖于你使用的场景和需求。如果是简单的页面跳转，可以通过 URL 参数或 Vuex 全局状态管理；如果需要在页面间长期存储数据，推荐使用 uni.setStorage 或 globalData 进行传递。

原文地址：https://blog.csdn.net/qq_45153375/article/details/143695637

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！