wepy中组件通信与交互

events

events是wepy组件事件处理函数对象，存放响应组件之间通过emit、$invoke所传递的事件的函数

$broadcast

父 -------> 子

$emit

子 -------> 父

组件自定义事件处理函数

可以通过使用.user修饰符为自定义组件绑定事件，如：@customEvent.user=“myFn”
其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀。
目前总共有三种事件后缀：
.default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；
.stop: 绑定小程序捕获型事件，如catchtap；
.user: 绑定用户自定义组件事件，通过$emit触发。
注意，如果用了自定义事件，则events中对应的监听函数不会再执行。

$invoke

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

代码演示：
父组件

<style lang="less">

</style>
<template>
	<view>
		<p @tap="bbb">点击触发invoke</p>
		<p>{{name}}</p>
		<p>{{message}}</p>
		<child @toParent.user = "aaa"></child>
	</view>
</template>
<script>
	import wepy from 'wepy'
	import Child from '../components/child'
	export default class News extends wepy.page {
		data = {
			name: 'xiaoming',
			message:''
		}
		components={
			child: Child
		}
		onLoad(){
			  //父组件传递数据到子组件
			  this.$broadcast('toChild', '我是父组件')
		}
		methods = {
			//组件自定义处理函数
			aaa(){
			  this.message = '组件自定义事件处理函数，但是events中的监听函数不在执行了'
			},
			//父组件调用子组件的方法
			bbb(){
				this.$invoke('child', 'plus', 1)
			}  
		}
		//接收$emit传过来的数据
		events = {
		  'toParent':(...args) => {
		    console.log(args)
		    this.message = args[0]
		    let $event = args[args.length - 1]
		    console.log($event)
		    console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
		  }
		}
	}
</script>

子组件

<style lang="less">

</style>
<template>
  <view class="news">		
    <view>组件通信</view>
    <p>{{name}}</p>
    <button @tap="plus">点击我向父组件传递数据</button>
  </view>
</template>
<script>
import wepy from 'wepy'
export default class Child extends wepy.component {
  data = {
    name:''
  }
  //接收$broadcast传递过来的数据
  events = {
    'toChild':(...args) => {
      console.log(args)
      let $event = args[args.length - 1]
      console.log($event)
      console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
      this.name = args[0]
    }
  }
  methods = {
    //$invoke调用该方法
    plus(...args) {
      //接收$invoke传递过来的数据
      console.log(args)
      
      //子组件传递数据到父组件
      this.$emit('toParent','我是子组件')
    }
  }
}
</script>