小程序组件中传值的几种方式
一、小程序通过id属性传值
当我们在标签上添加id属性进行传值，可以在当前标签添加点击事件来获取id中的值。
<view class="container">
<view class="usermotto">
<!-- 传入普通字符串数值 -->
<button class="user-motto" bindtap="onGetIdValue" id="winne">小程序通过id传值</button>
<!-- 传入对象数值 -->
<!-- <button class="user-motto" bindtap="onGetIdValue" id='{"name":"winne"}'>小程序通过id传值</button> -->
</view>
</view>
2、在点击事件中获取id中的值（index.js）
Page({
//事件处理函数
onGetIdValue (e) {
// currentTarget:事件绑定的当前组件
console.log(e.currentTarget.id)
// 如果获取到的是字符串对象数值
// let id = e.currentTarget.id
// let jsonId = JSON.parse(id)
// console.log(jsonId)
}
})
ps： 当我们拿到了这个id值之后就可以对值进行处理了，可以通过设置全局对象的方式来传递数值（这样在无论哪个组件中都可以获取到）。看需求进行设置，不能过多设置全局数据。
获取全局对象let app=getApp();
设置全局的请求访问传递的参数app.requestDetailid=e.currentTarget.id;
二、小程序通过data-xxxx的方式进行传值
该方法和通过id传值有点类似，都是在标签上进行添加相应属性进行传值，然后通过事件对象进行获取值。
我们在标签中添加data-开头的属性，然后里面写入想要传递的值，然后在当前标签添加点击事件来获取值。
1、添加data-属性进行传值（index.wxml）
<!--index.wxml-->
<view class="container">
<view class="usermotto">
<button class="user-motto" bindtap="onGetDataValue" data-first-name="winne" data-age="22">小程序通过data-xxxx传值</button>
</view>
</view>
2、在点击事件中获取 data- 中的值（index.js）
//index.js
Page({
//事件处理函数
onGetDataValue(e) {
console.log(e)
// dataset是当前组件上由data-开头的自定义属性组成的集合对象
console.log(e.currentTarget.dataset) // {age: "22", firstName: "winne"}
}
})
注意：
以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)。
严谨的正确写法如：data-element-type
最终在 event.currentTarget.dataset 中会将连字符转成驼峰：elementType。
三、页面跳转，给跳转到的页面进行传值
onJumpToLogisticsDetail(e) { // target:触发事件的源组件 let orderid = e.target.dataset.orderid let num = e.target.dataset.num wx.navigateTo({ url: `/pages/logisticsDetail/logisticsDetail?orderId=${orderid}&num=${num}` }) }
}
其他的页面在onLoad里面获取
//logisticsDetail.js
onLoad: function (options) {
console.log(options) //{orderid:"678465",num:"1"}
}
四、父组件向子组件传值（ properties ）
1、父组件的json文件中声明对引用子组件
{
"usingComponents": {
"w-child": "/components/child/child"
}
}
2、父组件的wxml中使用子组件
父组件中使用子组件标签，并在标签上写自定义属性对子组件进行传递数据。
<w-child fatherName='winne' fatherAge='22'></w-child>
3、子组件在js中获取父组件中传过来的值
properties: { // 在这里拿到了数据之后可以直接使用了（在wxml模板渲染，或者js中使用t
his.data.fatherName/this.properties.fatherName 都能获取到），不要直接修改properties属性中的数据
fatherName: {
type: String
},
fatherAge: Number
}
在 properties 定义段中，属性名采用驼峰写法（fatherName）；
详细组件的配置解析请看官网：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
五、子组件向父组件传值（ this.triggerEvent() ）
需要子组件手动触发事件，然后父组件监听事件
1、子组件触发自定义事件，传递数据给父组件
<view class="navi-item" data-index="0" bindtap="onChangeAnchor">tab</view>
2、子组件在点击事件中主动触发自定义事件
onChangeAnchor(e) {
var index = e.target.dataset.index
//子组件传值给父组件
let myEventDetail = { // 需要传递什么数据就在这个对象中写
val: index
}
// myEventDetail 对象，提供给事件监听函数的参数数据
// changeNaviIndex 是自定义名称事件，父组件中监听使用
this.triggerEvent('changeNaviIndex', myEventDetail)
}
3、父组件wxml中监听子组件的自定义事件
<!-- parents.wxml-->
<!-- 注意这里写的事件监听名字-->
<w-child bind:changeNaviIndex="onGetIndex" />
4、父组件的js中书写事件函数，获取子组件传递过来的数据
// parents.js
onGetIndex( paramData) { // paramData参数就是子组件的this.triggerEvent()
console.log(paramData.detail.val) // 0
}
组件的监听事件和触发事件详解请看官网：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
