小程序中组件传值的几种方式

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