【愚公系列】2022年10月 微信小程序-优购电商项目-⾃定义组件传参

---

前言

组件传参是小程序中非常重要的一个功能，因为小程序大多都是组件形式存在的。

一、id和data-xxx传参

view class="container">
  <view class="usermotto">
      <!-- 传入普通字符串数值 -->
    <button class="user-motto" bindtap="onGetIdValue" id="winne" data-name="name">小程序通过id传值</button>
  </view>
</view>
1
2
3
4
5
6

Page({  
  //事件处理函数
  onGetIdValue (e) {
    // currentTarget:事件绑定的当前组件
    console.log(e.currentTarget.id)   
    console.log(e.currentTarget.dataset.name)
  }
})
1
2
3
4
5
6
7
8

二、导航传值

onJumpToLogisticsDetail(e) {
// target:触发事件的源组件
   let orderid = 110110110
   let num = 120120120
   wx.navigateTo({
     url: `/pages/logisticsDetail/logisticsDetail?orderId=${orderid}&num=${num}`
      })
    }   
}
1
2
3
4
5
6
7
8
9

//logisticsDetail.js
onLoad: function (options) {
  console.log(options) 
}  
1
2
3
4

三、父子组件传值

1. ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中

2. ⽗组件 监听 onMyTab 事件

3. ⼦组件 触发 bindmytap 中的 mytap 事件

   1. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象

4. ⽗ -> ⼦ 动态传值 this.selectComponent(“#tabs”);

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
 内容-这里可以放插槽
</tabs>
// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
   }
 }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34