小程序传参场景大全

在小程序开发中，参数传递是页面间数据交互的关键，掌握各种传参场景至关重要。本文将全面总结小程序的传参方式，以供各位开发者参考。

跨页面传参

传递简单的字符串（任意关系组件）

• 传递参数：wx.navigateTo({url: 'xxx?id=123'})
• 接收参数：onLoad(options) { console.log(options.id) }

传递对象（任意关系组件）

• 传递参数：wx.navigateTo({url: 'xxx?data=' + JSON.stringify({id: 123})})
• 接收参数：onLoad(options) { console.log(JSON.parse(options.data).id) }

组件传参

父传子

• 在父组件中，使用data属性传递数据：<my-component data="{{ data }}"/>
• 在子组件中，使用properties属性接收数据：<my-component properties="{{ data }}"/>

子传父

• 在子组件中，通过触发自定义事件传递数据：<button bindtap="handleEvent">触发事件</button>
• 在父组件中，通过catchEvent监听事件并接收数据：<my-component catchEvent="handleEvent"/>

父子组件传参

父传子：利用 <slot>

• 在父组件中，使用 <slot> 标签传递数据：<my-component><slot name="data">{{ data }}</slot></my-component>
• 在子组件中，使用 <slot> 标签接收数据：<my-component><slot name="data"><template is="dom"> {{ data }} </template></slot></my-component>

子传父：利用 <scoped-slot>

• 在子组件中，使用 <scoped-slot> 标签传递数据：<my-component><template slot-scope="data"> {{ data }} </template></my-component>
• 在父组件中，使用 <template> 标签接收数据：<my-component><template scope="data">接收到的数据：{{ data }}</template></my-component>

其他场景

• 通过存储器传递数据（Redux）： 使用第三方库或框架管理数据状态，跨页面和组件共享数据。
• 通过消息队列传递数据（EventBus）： 使用全局消息机制，实现组件间通信和数据传递。
• 通过服务端传递数据： 通过服务端接口，将数据传递给小程序客户端。

以上列举了小程序中最常见的传参场景，开发者可以根据实际需求选择合适的方式进行数据交互。此外，在使用传参场景时，需要考虑安全性和性能等因素，确保小程序的稳定运行。