微信小程序：页面与组件传值的几种方式_微信小程序 triggerevent 当前页面往组件传输参数

一、小程序通过id属性传值

当我们在标签上添加id属性进行传值，可以在当前标签添加点击事件来获取id中的值。
1、添加 id 属性进行传值（index.wxml）

<!--index.wxml-->
<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>
1
2
3
4
5
6
7
8
9

2、在点击事件中获取id中的值（index.js）

//index.js
Page({  
  //事件处理函数
  onGetIdValue (e) {
 	// currentTarget:事件绑定的当前组件
    console.log(e.currentTarget.id)   
    // 如果获取到的是字符串对象数值
    // let id = e.currentTarget.id
    // let jsonId = JSON.parse(id)
    // console.log(jsonId)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

当我们拿到了这个id值之后就可以对值进行处理了，可以通过设置全局对象的方式来传递数值（这样在无论哪个组件中都可以获取到）。看需求进行设置，不能过多设置全局数据。

// 获取全局对象
let app=getApp();
//设置全局的请求访问传递的参数
app.requestDetailid=e.currentTarget.id;
1
2
3
4

具体的小程序事件对象属性列表解析参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

二、小程序通过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>
1
2
3
4
5
6

2、在点击事件中获取 data- 中的值（index.js）

//index.js
Page({
  //事件处理函数
  onGetDataValue(e) {
    console.log(e)
    // dataset是当前组件上由data-开头的自定义属性组成的集合对象
    console.log(e.currentTarget.dataset) // {age: "22", firstName: "winne"}
  }
})

1
2
3
4
5
6
7
8
9
10

注意：
以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)。
严谨的正确写法如：data-element-type
最终在 event.currentTarget.dataset 中会将连字符转成驼峰：elementType。

具体的小程序事件对象属性列表解析参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

三、页面跳转，给跳转到的页面进行传值

模拟场景如：我们在订单详情页看到描述的物流信息，然后想点进去查看物流详情，那么此时订单详情页就需要把订单orderId传到物流详情页。
1、订单详情页组件（orderList）

<!-- orderList.wxml -->
<button class="common-btn" bindtap="onJumpToLogisticsDetail" data-orderid="678465" data-num="1">查看物流详情</button>


//orderList.js
// 查看物流详情
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}`
      })
    }    
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、物流详情页组件（logisticsDetail）

我们直接在组件的生命周期回调函数中可以获取到url地址传过来的值。
onLoad(Object query)：
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

//logisticsDetail.js
 onLoad: function (options) {
    console.log(options)  //{orderid:"678465",num:"1"}
  }  
1
2
3
4

生命周期回调函数详解可看官网：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#生命周期回调函数

四、父组件向子组件传值（ properties ）

1、父组件的json文件中声明对引用子组件

// parents.json
{
  "usingComponents": {
    "w-child": "/components/child/child"
  }
}
1
2
3
4
5
6

2、父组件的wxml中使用子组件

父组件中使用子组件标签，并在标签上写自定义属性对子组件进行传递数据。

<!-- parents.wxml-->
<w-child fatherName='winne' fatherAge='22'></w-child>
1
2
3
4

3、子组件在js中获取父组件中传过来的值

properties是组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数

// child.js
properties: {  // 在这里拿到了数据之后可以直接使用了（在wxml模板渲染，或者js中使用this.data.fatherName/this.properties.fatherName 都能获取到），不要直接修改properties属性中的数据
  fatherName: {
    type: String
  },
  fatherAge: Number
}
1
2
3
4
5
6
7
8
9

官网提示：在 properties 定义段中，属性名采用驼峰写法（fatherName）；在 wxml 中，指定属性值时则对应使用连字符写法（father-name=“winne”），应用于数据绑定时采用驼峰写法（attr="{{fatherName}}"）。

其实我们也可以全都使用驼峰写法（可能会低版本的微信不支持）。

详细组件的配置解析请看官网：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

五、子组件向父组件传值（ this.triggerEvent() ）

需要子组件手动触发事件，然后父组件监听事件
1、子组件触发自定义事件，传递数据给父组件

<!-- child.wxml-->
<view class="navi-item" data-index="0" bindtap="onChangeAnchor">tab</view>
1
2

2、子组件在点击事件中主动触发自定义事件

// child.js
onChangeAnchor(e) {
      var index = e.target.dataset.index      
      //子组件传值给父组件
      let myEventDetail = { // 需要传递什么数据就在这个对象中写
        val: index
      }
      // myEventDetail 对象，提供给事件监听函数的参数数据
      // changeNaviIndex 是自定义名称事件，父组件中监听使用
      this.triggerEvent('changeNaviIndex', myEventDetail)
    }
1
2
3
4
5
6
7
8
9
10
11

3、父组件wxml中监听子组件的自定义事件

<!-- parents.wxml-->
<!-- 注意这里写的事件监听名字-->
 <w-child bind:changeNaviIndex="onGetIndex" />
1
2
3

4、父组件的js中书写事件函数，获取子组件传递过来的数据

// parents.js
  onGetIndex( paramData) { // paramData参数就是子组件的this.triggerEvent()
    console.log(paramData.detail.val)  // 0
  }
1
2
3
4