小程序組件中傳值的幾種方式

一、小程序通過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