wepy 传值通信

wepy 传值通信#

组件间传值#

用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中

父 => 子：#

（一）父 => 子/多子

父组件：this.$broadcast('event', params)

子组件：

Copy
events = {
	event() {}
}

（二）父 => 子

父组件： <Child :date.sync="date" />

子组件：

Copy
props = {
	date: {
		type: String,
		default: null
	}
}

子 => 父：#

子组件：this.$emit('event', params)

父组件：

Copy
（一）：
events = {  // events中的监听函数
	event() {}
}

（二）：
<Child @event.user="getEventData"/>  // 自定义事件

getEventData() {

}

一和二只能选一个，不能共存

组件/页面 => 组件#

$invoke是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。

this.$invoke('ComA', 'someMethod', 'someArgs');

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

自定义事件函数修饰符 .user#

@customEvent.user="myFn"

目前共有三种事件后缀：

• .default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；
• .stop: 绑定小程序捕获型事件，如catchtap；
• .user: 绑定用户自定义组件事件，通过$emit触发。**注意，如果用了自定义事件，则events中对应的监听函数不会再执行。

页面路由间传值#

在不使用vuex的情况下使用微信小程序中的navigateTo方法传值,通过

eventChannel

Copy
// a.wpy
// a页面跳转到b页面
wx.navigateTo({
    url: '/pages/b',
    events: {
      // 为指定事件添加一个监听器，获取b页面传送到当前页面的数据
      someEvent: function(data) {
        console.log(data) // {data: 'test'}
      }
    },
    success: function (res) {
      // 通过eventChannel向b页面传送数据
      res.eventChannel.emit('active', { active: 4 })
  }
});

Copy
// b.wpy
// 在onLoad生命周期中使用eventChannel监听a页面传过来的数据
 onLoad() {
    const eventChannel = this.$wx.getOpenerEventChannel();
    // 通过eventChannel向a页面传送数据
    eventChannel.emit('someEvent', {data: 'test'});
    // 通过eventChannel监听a页面传过来的数据
    eventChannel.on('active', (data) => {
      console.log(data); // {active: 4}
    });
  },

通过路由直接传参，受到参数大小的限制，一旦超过限制，参数会被截断导致前端页面报错。而参数往往都是直接传的接口中获取到的数据，这些数据的大小无法控制和确定，因此隐患较大。