微信小程序——事件传递参数、页面跳转传递参数、组件传值

wxml页面操作时传递参数

当我们在xxx.wxml页面中，给某个位置绑定事件并想传值时，例如：我们在循环一组元素，每个元素的id是不同的，点击不同元素，根据不同id，请求不同的详细信息

这时，我们需要这样做：

xxx.wxml中：

  <view 
    class="activity-item" 
    wx:for="{{activityList}}" 
    wx:key="index"
    data-id="{{item.id}}"				// 将id 传过去
    bindtap="toActivityDetail"    // 绑定事件
  >
    <image mode="aspectFill" class="activity-item-image" src="{{item.cover}}"></image>
  </view>

xxx.js中，获取id值

  // 跳转至活动详情页面
  toActivityDetail: function(event){
    console.log(event.currentTarget.dataset.id,"传值")
  },

页面跳转传递参数

我们在当前页面跳转至下一页面时，如果想要将参数也带入到下一页面，并在下一页面使用时，可以通过以下方式

a.js 跳转时，将参数拼接到跳转路径后

    wx.navigateTo({
      url: `/pages/activityDetail/activityDetail?activityId=${jumpid}`,
    })


b.js跳转过来后，接收参数，进行下一步操作

  onLoad: function (options) {
    this.getActivityDetailMsg(options.activityId)   // 在页面加载时的选项中，可以接收到跳转前传过来的参数，并进行下一步操作，可以使用setData方法存，也可以直接使用
  },

父组件传值给子组件

父组件:

<view class="activityDetail">
  <image class="activityDetail-image" mode="aspectFill" src="{{activityDetail.banner}}" />
  <t-deadline endDate="{{activityDetail.endDate}}"/>   // 传的属性名为endDate，值为后面的值
</view>

子组件：
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    endDate:{	// 在此处接收该属性
      type:String
    }
  },
// 数据监听器,属性值变化时可以进行相应的操作
  observers:{
    'endDate':function(val){
      if(val){
...

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~