小程序组件间传值

1、属性绑定(Props):

父组件通过在子组件标签上设置属性的方式向子组件传值。

子组件通过properties定义接收的属性
父组件:

wxml

bash 复制代码
   <child-component title="{{parentData}}"></child-component>

子组件:

js

bash 复制代码
   properties: {
     title: {
       type: String,
       value: ''
     }
   }

2、事件(event):

子组件触发事件,将数据通过事件参数传递给父组件
子组件

wxml

bash 复制代码
<view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="customEvent">
      确定
    </view>

js

bash 复制代码
methods:{
	customEvent(){
		this.triggerEvent('customEvent', {data: 'someData'});
	}
}

父组件:

wxml

bash 复制代码
   <child-component bind:customEvent="handleChildEvent"></child-component>
   //bind:可以省略不写,是冒泡事件
   //阻止冒泡(捕获事件):catch:customEvent=

js

bash 复制代码
   methods: {
     handleChildEvent(e) {
       const dataFromChild = e.detail.data;
     }
   }

3、全局变量

利用小程序的全局对象app.globalData进行跨页面或跨组件的数据共享

app.js:

bash 复制代码
   App({
     globalData: {
       sharedData: 'Hello'
     }
   });

获取:

bash 复制代码
   const app = getApp();
   const sharedData = app.globalData.sharedData;

4、URL参数:

通过页面跳转时在URL中携带参数

bash 复制代码
   wx.navigateTo({
     url: '/path/to/page?param=value'
   });

接收:

bash 复制代码
   onLoad(options) {
     const param = options.param;
   }

5、setData与this.selectComponent

在某些场景下,可以通过this.selectComponent获取子组件实例,直接调用子组件的方法或修改子组件的data
父组件:

bash 复制代码
   const child = this.selectComponent('#child-component');
   child.updateData(someData);

子组件:

bash 复制代码
   methods: {
     updateData(newData) {
       this.setData({
         data: newData
       });
     }
   }
相关推荐
2501_915909063 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师8 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
00后程序员张10 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
会点法律的程序员13 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
2501_9159214316 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159214316 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
@二十六16 小时前
微信小程序订阅消息工具封装,兼容一次性订阅和长期订阅
微信小程序·小程序·订阅消息
dcloud_jibinbin17 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
用力的活着18 小时前
uniapp 微信小程序蓝牙接收中文乱码
微信小程序·小程序·uni-app
流***陌19 小时前
陪诊陪护小程序前端功能解析:就医照料的便捷对接与全流程保障
小程序