小程序组件间传参数

小程序组件间传参数

1. 从一个组件跳转到另一个组件，可以在地址后添加参数

 url: `../more/more?category=${JSON.stringify(this.data.category)}`,
      })

然后在另一个组件内的onLoad事件内可以获取到参数

   onLoad: function (options) {
         this.setData({
              category: JSON.parse(options.category)
         })
    },

对象的话须转换JSON然后传。
2. 自定义事件(父组件对子组件)
这里调用自定义组件并绑定“timeTabChange”方法

<chart-apply bindtabHandle="timeTabChange"></chart-apply>

在子组件可以接受到这个方法,this.triggerEvent()类似Vue的this.$emit()方法，调用父组件传递过来的自定义事件并返回参数，子组件的wxml内可以使用data-index=“{{index}}”创建额外参数index，然后在方法的e.target.dataset内可以看到自定义的参数。

   activeTab(e){
      this.setData({
          currentIndex: e.target.dataset.index
      })
      this.triggerEvent('tabHandle',e.target.dataset.index )
    }

然后父组件内的timeTabChange方法会收到子组件返回的参数

 timeTabChange(e) {
    this.setData({
      tabListActive: e.detail,
      "sendMoneyData.timeType": e.detail + 1,
      moneyLoad: true
    })
  },

其中e.detail就是从子组件返回的值。
3. 组件关系
当两个自定义组件之间有着嵌套关系的时候，可以在两个组件之内定义 relations，从而直接访问对方组件的实例(暂时还没用过)