1、属性绑定(Props):
父组件通过在子组件标签上设置属性的方式向子组件传值。
子组件通过properties定义接收的属性
父组件:
wxml
<child-component title="{{parentData}}"></child-component>
子组件:
js
properties: {title: {type: String,value: ''}}
2、事件(event):
子组件触发事件,将数据通过事件参数传递给父组件
子组件:
wxml
<view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="customEvent">确定</view>
js
methods:{customEvent(){this.triggerEvent('customEvent', {data: 'someData'});}
}
父组件:
wxml
<child-component bind:customEvent="handleChildEvent"></child-component>//bind:可以省略不写,是冒泡事件//阻止冒泡(捕获事件):catch:customEvent=
js
methods: {handleChildEvent(e) {const dataFromChild = e.detail.data;}}
3、全局变量
利用小程序的全局对象app.globalData
进行跨页面或跨组件的数据共享
app.js:
App({globalData: {sharedData: 'Hello'}});
获取:
const app = getApp();const sharedData = app.globalData.sharedData;
4、URL参数:
通过页面跳转
时在URL中携带参数
wx.navigateTo({url: '/path/to/page?param=value'});
接收:
onLoad(options) {const param = options.param;}
5、setData与this.selectComponent
在某些场景下,可以通过this.selectComponent获取子组件实例,直接调用子组件的方法或修改子组件的data
父组件:
const child = this.selectComponent('#child-component');child.updateData(someData);
子组件:
methods: {updateData(newData) {this.setData({data: newData});}}