wepy中组件之间通信方法

events

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

$broadcast

$broadcast事件由父组件发起，所有的子组件都会收到父组件发出的数据，嗯，类似于村口的广播大喇叭。他的传播顺序为：

image.png
在父组件的某个函数内，向子组件下发了index-broadcast这个通知，如下：

 this.$broadcast('index-broadcast', '我正在测试哈哈哈哈')

那么在子组件中，可以用这种方法来接受数据：

events = {
      'index-broadcast': (...args) => {
        console.log(args)          //["我正在测试哈哈哈哈", _class]
        //可以通过以下方法拿到子组件名称+拿到数据的事件名称+事件的来源
        let $event = args[args.length - 1]    
        console.log($event)
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
      }
}

$emit

broadcast正好相反，事件发起组件的所有祖先组件会依次接收到emit事件，那么接收到事件的先后顺序为：组件ComA、页面Page_Index。如下图：

image.png

    methods = {
      plus () {
        this.num = this.num + 1
        console.log(this.$name + ' plus tap')

        this.$emit('index-emit', 1, 2, 3)
      },
      minus (...args) {
        console.log(args);
        this.num = this.num - 1
        console.log(this.$name + ' minus tap'+this.num)
      }
    }

我们可以看到counter组件的plus方法向父组件$emit了一个一个名叫index-emit的方法，父组件该如何接收他？
直接在父组件的events里面写就好啦：

    events = {
      'index-emit': (...args) => {
        let $event = args[args.length - 1]
        console.log($event)
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
      }
    }

组件自定义事件处理函数

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

意思是我们接受组件之间传来的数据，肯定是要用自定义事件的，但是如果使用了.user修饰符进行修饰的话，events中对应的监听函数就不再执行了

<template>
    <child @childFn.user="parentFn"></child>
</template>

<script>
    import wepy from 'wepy'
    import Child from '../components/child'

    export default class Index extends wepy.page {
        components = {
            child: Child
        }

        methods = {
            parentFn (num, evt) {
                console.log('parent received emit event, number is: ' + num)
            }
        }
    }
</script>


// child.wpy

<template>
    <view @tap="tap">Click me</view>
</template>

<script>
    import wepy from 'wepy'

    export default class Child extends wepy.component {
        methods = {
            tap () {
                console.log('child is clicked')
                this.$emit('childFn', 100)
            }
        }
    }
</script>

$invoke

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

比如，想在页面Page_Index中调用组件ComA的某个方法：
this.$invoke('ComA', 'someMethod', 'someArgs');

在父组件中，想要调用子组件counter的某个方法，如下：

this.$invoke('counter', 'minus',1000000)
this.$invoke('counter', 'plus', 45, 6)

那么在子组件中可以通过这样来接收父组件传过来的参数：

    methods = {
      plus () {
        this.num = this.num + 1
        console.log(this.$name + ' plus tap')

        this.$emit('index-emit', 1, 2, 3)
      },
      minus (...args) {
        console.log(args);
        this.num = this.num - 1
        console.log(this.$name + ' minus tap'+this.num)
      }
    }