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

一、小程序通過id屬性傳值

1.當我們在標簽上添加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中使用
this.data.fatherName/this.properties.fatherName 都能獲取到），不要直接修改properties屬性中的數據
  fatherName: {
    type: String
  },
  fatherAge: Number
}

　　

五、子組件向父組件傳值（ 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
  }