events
events是WePY組件事件處理函數(shù)對象媒楼，存放響應(yīng)組件之間通過emit芯咧、$invoke所傳遞的事件的函數(shù)
$broadcast
$broadcast事件由父組件發(fā)起通贞，所有的子組件都會(huì)收到父組件發(fā)出的數(shù)據(jù)搞监，嗯，類似于村口的廣播大喇叭满葛。他的傳播順序?yàn)椋?br>
在父組件的某個(gè)函數(shù)內(nèi)径簿，向子組件下發(fā)了
index-broadcast這個(gè)通知，如下：
this.$broadcast('index-broadcast', '我正在測試哈哈哈哈')
那么在子組件中嘀韧，可以用這種方法來接受數(shù)據(jù)：
events = {
'index-broadcast': (...args) => {
console.log(args) //["我正在測試哈哈哈哈", _class]
//可以通過以下方法拿到子組件名稱+拿到數(shù)據(jù)的事件名稱+事件的來源
let $event = args[args.length - 1]
console.log($event)
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
}
}
$emit
broadcast正好相反篇亭，事件發(fā)起組件的所有祖先組件會(huì)依次接收到
emit事件锄贷，那么接收到事件的先后順序?yàn)椋航M件ComA译蒂、頁面Page_Index。如下圖：
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了一個(gè)一個(gè)名叫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}`)
}
}
組件自定義事件處理函數(shù)
可以通過使用.user修飾符為自定義組件綁定事件，如：@customEvent.user="myFn"
其中因惭，@表示事件修飾符岳锁，customEvent 表示事件名稱，.user表示事件后綴蹦魔。
目前總共有三種事件后綴：
.default: 綁定小程序冒泡型事件激率，如bindtap，.default后綴可省略不寫勿决；
.stop: 綁定小程序捕獲型事件乒躺，如catchtap；
.user: 綁定用戶自定義組件事件低缩，通過$emit觸發(fā)嘉冒。注意，如果用了自定義事件咆繁，則events中對應(yīng)的監(jiān)聽函數(shù)不會(huì)再執(zhí)行讳推。
意思是我們接受組件之間傳來的數(shù)據(jù)，肯定是要用自定義事件的玩般，但是如果使用了.user修飾符進(jìn)行修飾的話银觅，events中對應(yīng)的監(jiān)聽函數(shù)就不再執(zhí)行了
<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是一個(gè)頁面或組件對另一個(gè)組件中的方法的直接調(diào)用，通過傳入組件路徑找到相應(yīng)的組件坏为，然后再調(diào)用其方法究驴。
比如镊绪，想在頁面Page_Index中調(diào)用組件ComA的某個(gè)方法：
this.$invoke('ComA', 'someMethod', 'someArgs');
在父組件中，想要調(diào)用子組件counter的某個(gè)方法洒忧，如下：
this.$invoke('counter', 'minus',1000000)
this.$invoke('counter', 'plus', 45, 6)
那么在子組件中可以通過這樣來接收父組件傳過來的參數(shù)：
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)
}
}
