最近公司有需求做一个钉钉小程序,因为官方文档的介绍真的让人看得头晕,所以最后决定对小程序组件传值自己写一篇总结。
父传子:
[父组件]page/index/index.axml
<component name="我是父组件传递过来的" />
[子组件]//components/component/index.axml
<view>
{{ name }} // 我是父组件传递过来的
</view>
子传父:
[父组件] pages/index/index.axml
{{ num }} //999
<component name="我是父组件传递过来的" onChange="onChange"></component>
[父组件] pages/index/index.js
Page({
data:{
num:999
},
onChange(data){
this.setData({
num:data
});
}
此时data形参未传值,所以num值默认999
接下来和子组件建立联系
[子组件] components/component /index.axml
<view>
{{ name }}
<button onTap="add">+</button>
</view>
[子组件] components/component/index.js
Component({
props: {
onChange(data){console.log(data)}
},
data:{
child:0
},
didMount(){
this.onChange()
},
didUpdate(){
this.onChange()
},
methods:{
onChange(){
this.props.onChange(this.data.child);//将子组件data实例对象下的child当做形参传递给父组件的函数
},
add(){
this.setData({
num:this.data.child ++ //此时操作子组件函数的child+1,父组件num相应的也+1
});
}
}
})
最后父组件视图里的num值就会更新为0,点击button按钮num依次+1
[父组件] pages/index/index.axml
{{ num }} //0
<component name="我是父组件传递过来的" onChange="onChange"></component>
特别提醒:
支付宝、钉钉小程序因语法类似,所以这里的组件传值在两个开发环境都适用,建立相对应的目录,copy即可