最全的小程序传参场景

本文用于总结小程序各种传参场景，如有缺省，欢迎补充~~~

跨页面传参

传递简单的字符串(任何关系组件)

传递参数：

wx.navigateTo({
  url: `/pages/home/index?id=${id}`
});

接收参数：

onLoad(options) {
    console.log(options.id)
}

传递对象(任何关系组件)

传递参数：

      wx.navigateTo({
        url: `/pages/home/index`,
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("eventName", { ...msg});
        },
      });

接收参数：

    const eventChannel = this.getOpenerEventChannel();
    
    eventChannel && eventChannel.on && eventChannel.on('eventName', (data) => {
      console.log('接收参数',data)
    })

父子组件传参

父传子

通过props

父组件传递参数：

<my-component propName="{{propVal}}"></my-component>

子组件接收参数：

// 定义参数
properties:{
    propName:{
        type:Boolean,//参数类型
        value:false //参数默认值
    }
}

// 在js中使用 
console.log(this.properties.propName)

在html中使用：

<view>{{propName}}</view>

监听props变化做出处理

observers: {
    propsName:function(val){
        console.log(val)
    }
}

通过 selectComponent

可在父组件里调用 this.selectComponent ，获取子组件的实例对象。

调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

// 父组件
Page({
  data: {},
  getChildComponent: function () {
    const child = this.selectComponent('.my-component');
    console.log(child)
  }
})

在上例中，父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this 。

注意 ：默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例（将返回 null）。如果想让一个组件在上述条件下依然能被 selectComponent 返回，可以自定义其返回结果（见下）。

自定义的组件实例获取结果

若需要自定义 selectComponent 返回的数据，可使用内置 behavior: wx://component-export

使用该 behavior 时，自定义组件中的 export 定义段将用于指定组件被 selectComponent 调用时的返回值。

// 自定义组件 my-component 内部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})

<!-- 使用自定义组件时 -->
<my-component id="the-id" />

// 父组件调用
const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }

在上例中，父组件获取 id 为 the-id 的子组件实例的时候，得到的是对象 { myField: 'myValue' } 。

子传父

父组件传入方法：

<my-component bind:funcName="func"></my-component>

子组件调用父组件方法：

this.triggerEvent('funcName', params);

返回上一页并传参

      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];//上一个页面的js里面的pages的所有信息。 
      
      // 可以直接调用prevPage的方法
      prevPage.setData({
        // 也可以通过设置data直接更新页面.....
      })
      wx.navigateBack()